CSS3 Loading Bar

Kode CSS

.loading {text-align:center;}

.loading span {
  display:inline-block;
  margin:0px 1px;
  width:20px;
  height:20px;
  background-color:cyan;
}

.loading span:nth-child(1) {
  -webkit-animation:loading 0.5s infinite alternate 0s;
  -moz-animation:loading 0.5s infinite alternate 0s;
  -ms-animation:loading 0.5s infinite alternate 0s;
  -o-animation:loading 0.5s infinite alternate 0s;
  animation:loading 0.5s infinite alternate 0s;
}

.loading span:nth-child(2) {
  -webkit-animation:loading 0.5s infinite alternate 0.2s;
  -moz-animation:loading 0.5s infinite alternate 0.2s;
  -ms-animation:loading 0.5s infinite alternate 0.2s;
  -o-animation:loading 0.5s infinite alternate 0.2s;
  animation:loading 0.5s infinite alternate 0.2s;
}

.loading span:nth-child(3) {
  -webkit-animation:loading 0.5s infinite alternate 0.4s;
  -moz-animation:loading 0.5s infinite alternate 0.4s;
  -ms-animation:loading 0.5s infinite alternate 0.4s;
  -o-animation:loading 0.5s infinite alternate 0.4s;
  animation:loading 0.5s infinite alternate 0.4s;
}

.loading span:nth-child(4) {
  -webkit-animation:loading 0.5s infinite alternate 0.6s;
  -moz-animation:loading 0.5s infinite alternate 0.6s;
  -ms-animation:loading 0.5s infinite alternate 0.6s;
  -o-animation:loading 0.5s infinite alternate 0.6s;
  animation:loading 0.5s infinite alternate 0.6s;
}

@-webkit-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-moz-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-ms-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-o-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

Kode HTML

<div class='loading'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Kalau dimasukkan ke elemen laman html/javascript, berikut kodenya :

<style type='text/css'>
.loading {text-align:center;}

.loading span {
  display:inline-block;
  margin:0px 1px;
  width:20px;
  height:20px;
  background-color:white;
}

.loading span:nth-child(1) {
  -webkit-animation:loading 0.5s infinite alternate 0s;
  -moz-animation:loading 0.5s infinite alternate 0s;
  -ms-animation:loading 0.5s infinite alternate 0s;
  -o-animation:loading 0.5s infinite alternate 0s;
  animation:loading 0.5s infinite alternate 0s;
}

.loading span:nth-child(2) {
  -webkit-animation:loading 0.5s infinite alternate 0.2s;
  -moz-animation:loading 0.5s infinite alternate 0.2s;
  -ms-animation:loading 0.5s infinite alternate 0.2s;
  -o-animation:loading 0.5s infinite alternate 0.2s;
  animation:loading 0.5s infinite alternate 0.2s;
}

.loading span:nth-child(3) {
  -webkit-animation:loading 0.5s infinite alternate 0.4s;
  -moz-animation:loading 0.5s infinite alternate 0.4s;
  -ms-animation:loading 0.5s infinite alternate 0.4s;
  -o-animation:loading 0.5s infinite alternate 0.4s;
  animation:loading 0.5s infinite alternate 0.4s;
}

.loading span:nth-child(4) {
  -webkit-animation:loading 0.5s infinite alternate 0.6s;
  -moz-animation:loading 0.5s infinite alternate 0.6s;
  -ms-animation:loading 0.5s infinite alternate 0.6s;
  -o-animation:loading 0.5s infinite alternate 0.6s;
  animation:loading 0.5s infinite alternate 0.6s;
}

@-webkit-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-moz-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-ms-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@-o-keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}

@keyframes loading {
  0%   {opacity:0.1;}
  100% {opacity:1;  }
}
</style>
<div class='loading'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>