JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<div class="lds-ellipsis">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="lds-ellipsis2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<span></span>

SCSS

.lds-ellipsis {
  display: inline-block;
  width: 180px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 13px;
  margin-left: -80px;
}

.lds-ellipsis2 {
  display: inline-block;
  width: 180px;
  height: 64px;
  position: absolute;
  left: 50%;
  top: 13px;
  margin-left: -80px;
  display:none;
}

.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);  
  animation-timing-function: ease;
  box-shadow: 0 0 17px 6px rgba(255, 0, 24, 0.6);
}

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

$time: 1.2s;
$delay: 1.2s;
.lds-ellipsis div:nth-child(1) {
  left: 0px;
  animation: lds-ellipsis1 $time infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 20px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.1s + $delay;
}
.lds-ellipsis div:nth-child(3) {
  left: 40px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.2s + $delay; 
}
.lds-ellipsis div:nth-child(4) {
  left: 60px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.3s;
}
.lds-ellipsis div:nth-child(5) {
  left: 80px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.4s;
}
.lds-ellipsis div:nth-child(6) {
  left: 100px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.5s;
}
.lds-ellipsis div:nth-child(7) {
  left: 120px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.6s;
}
.lds-ellipsis div:nth-child(8) {
  left: 140px;
  animation: lds-ellipsis1 $time infinite;
  animation-delay: 0.7s;
}

/*******/

.lds-ellipsis2 div:nth-child(8) {
  left: 140px;
  animation: lds-ellipsis1 $time infinite;
}
.lds-ellipsis2 div:nth-child(7) {
  left: 120px;
  animation:...

JavaScript

setInterval(function() {
   if($('.lds-ellipsis').css('opacity') == 0){
   		$('.lds-ellipsis').animate({ opacity: 1 });
      $('.lds-ellipsis2').animate({ opacity: 0 }); 
   }
   else {
   		$('.lds-ellipsis2').show();
   		$('.lds-ellipsis').animate({ opacity: 0 });
      $('.lds-ellipsis2').animate({ opacity: 1 }); 
   }
}, 1200);


/*setInterval(function() {
   if($('.lds-ellipsis').css('opacity') == 0){
   		$('.lds-ellipsis2 div:eq(7)').css('opacity',0);
      $('.lds-ellipsis div:eq(1)').css('opacity',1);;
   }
   else {
   		$('.lds-ellipsis div:eq(1)').css('opacity',0);
      $('.lds-ellipsis2 div:eq(7)').css('opacity',1);
   }
}, 1100);*/