JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div class="actionsBas">
  <button type="button" class="btn">
    <div class="ld-spheres">
      <div></div> <div></div> <div></div> <div></div>
    </div>
    <span>Enregistrer</span>
  </button>
  <button type="button" class="btn">
    <span>Annuler</span>
  </button>
  <button type="button" class="btn">
    <span>Supprimer</span>
  </button>
</div>

CSS

.btn{
   background-color: #36ba2c;
   border-color: #36ba2c;
   color: #fff;
   margin-left: 10px;
   font-size: 1em;
   border: 1px solid #36ba2c;
   line-height: 40px;
   padding: 0 15px;   
}

.actionsBas {
    margin-top: 20px;
}

.ld-spheres {
    position: relative;
}

.ld-spheres div {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  filter: invert(39%);
}
.ld-spheres div:nth-child(1) {
  animation: lds-ellipsis1 0.6s infinite;
}
.ld-spheres div:nth-child(2) {
  animation: lds-ellipsis2 0.6s infinite;
}
.ld-spheres div:nth-child(3) {
  left: 30px;
  animation: lds-ellipsis2 0.6s infinite;
}
.ld-spheres div:nth-child(4) {
  left: 59px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.1);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(29px, 0);
  }
}