JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<div id='test' class="lds-ellipsis">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<ul id="output">
</ul>

SCSS

.lds-ellipsis {
  display: inline-block;
  width: 180px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 173px;
  margin-left: -80px;
  border:1px solid #ccc;
}

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 9px;
  height: 11px;
  border-radius: 7px;
  background: #ff0b22;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  box-shadow: 0 0 17px 6px rgba(255, 0, 24, 0.6);
}

.lds-ellipsis div:nth-child(1) {
    left: 0px;
    animation: lds-ellipsis1 1.2s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 20px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 1.3s;
}
.lds-ellipsis div:nth-child(3) {
    left: 40px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 1.4s;
}

.lds-ellipsis div:nth-child(4) {
    left: 60px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 0.3s;
}
.lds-ellipsis div:nth-child(5) {
    left: 80px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 0.4s;
}
.lds-ellipsis div:nth-child(6) {
    left: 100px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 0.5s;
}
.lds-ellipsis div:nth-child(7) {
    left: 120px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 0.6s;
}
.lds-ellipsis div:nth-child(8) {
    left: 140px;
    animation: lds-ellipsis1 1.2s infinite;
    animation-delay: 0.8s;
}

/*******

.lds-ellipsis div:nth-child(1) {
    right: 0px;
    animation: lds-ellipsis2 1.2s infinite;
    animation-delay: 1.4s;
}
.lds-ellipsis div:nth-child(2) {
    right: 20px;
    animation: lds-ellipsis2 1.2s infinite;
    animation-delay: 2.7s;
}
.lds-ellipsis div:nth-child(3) {
    right: 40px;
    animation: lds-ellipsis2 1.2s infinite;
    animation-delay: 2.8s;
}
.lds-ellipsis div:nth-child(4) {
    right: 60px;
    animation: lds-ellipsis2 1.2s infinite;
    animation-delay: 1.7s;
}
.lds-ellipsis div:nth-child(5) {
    right: 80px;
    animation: lds-ellipsis2 1.2s infinite;
    animation-delay:...

JavaScript

/*var element = document.getElementById("test");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

//element.className = "slidein";
function listener(event) {
  var l = document.createElement("li");
  switch(event.type) {
    case "animationstart":
      l.innerHTML = "Début : durée écoulée : " + event.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Fin : durée écoulée : " + event.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "Nouvelle boucle démarrée à : " + event.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}*/