JSFiddle - React, Tailwind, and code Playground

by srinivaspotluri

HTML

<div class="shaft-load">
  Loading
</div>
<div class="shaft-load3">
  <div class="shaft1"></div>
  <div class="shaft2"></div>
  <div class="shaft3"></div>
  <div class="shaft4"></div>
  <div class="shaft5"></div>
  <div class="shaft6"></div>
  <div class="shaft7"></div>
  <div class="shaft8"></div>
  <div class="shaft9"></div>
  <div class="shaft10"></div>
</div>

CSS

html *,
html *:before,
html *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Universal styling */
[class^="shaft-load"] {
  margin: 50px auto;
  width: 60px;
  height: 30px;
}
[class^="shaft-load"] > div {
  float: left;
  background: #613338;
  height: 100%;
  width: 5px;
  margin-right: 1px;
  display: inline-block;
}
[class^="shaft-load"] .shaft1 {
  -webkit-animation-delay: 0.05s;
  -moz-animation-delay: 0.05s;
  -o-animation-delay: 0.05s;
  animation-delay: 0.05s;
}
[class^="shaft-load"] .shaft2 {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
[class^="shaft-load"] .shaft3 {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  -o-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
[class^="shaft-load"] .shaft4 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
[class^="shaft-load"] .shaft5 {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
[class^="shaft-load"] .shaft6 {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
[class^="shaft-load"] .shaft7 {
  -webkit-animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
  animation-delay: 0.35s;
}
[class^="shaft-load"] .shaft8 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
[class^="shaft-load"] .shaft9 {
  -webkit-animation-delay: 0.45s;
  -moz-animation-delay: 0.45s;
  -o-animation-delay: 0.45s;
  animation-delay: 0.45s;
}
[class^="shaft-load"] .shaft10 {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.shaft-load3 {
  position: relative;
  width: 100px;
  height: 100px;
}
.shaft-load3 > div {
 ...