A Pen by kaushalya.

index.html

<div class="wrapper">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>

Loading.markdown

Loading

Loading using css.

A Pen by kaushalya on CodePen.

License.

script.js

/*
 *
 *
 *
 *   
 *   2013 By Kaushalya R Mandaliya.
 *   https://twitter.com/kmandalwala
 *   
 *
 *
 *
 */

style.css

body {
  background: grey;
}
.wrapper {
  width: 6em;
  margin: 6em auto;
}
.dot:nth-child(1) {
  margin: 0.3em;
  position: absolute;
  height: 1em;
  width: 1em;
  background: aqua;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
}
.dot:nth-child(2) {
  position: absolute;
  margin: 0.3em 2em;
  height: 1em;
  width: 1em;
  background: aqua;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
}
.dot:nth-child(3) {
  position: absolute;
  margin: 0.3em 3.7em;
  height: 1em;
  width: 1em;
  background: aqua;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
}
.dot:nth-child(1) {
  -webkit-animation: load 2.3s linear infinite;
     -moz-animation: load 2.3s linear infinite;
       -o-animation: load 2.3s linear infinite;
          animation: load 2.3s linear infinite;
  -webkit-animation-delay: 0.7s;
     -moz-animation-delay: 0.7s;
       -o-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.dot:nth-child(2) {
  -webkit-animation: load 2.3s linear infinite;
     -moz-animation: load 2.3s linear infinite;
       -o-animation: load 2.3s linear infinite;
          animation: load 2.3s linear infinite;
  -webkit-animation-delay: 1.4s;
     -moz-animation-delay: 1.4s;
       -o-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

.dot:nth-child(3) {
  -webkit-animation: load 2.3s linear infinite;
     -moz-animation: load 2.3s linear infinite;
       -o-animation: load 2.3s linear infinite;
          animation: load 2.3s linear infinite;
  -webkit-animation-delay: 2.1s;
     -moz-animation-delay: 2.1s;
       -o-animation-delay: 2.1s;
          animation-delay: 2.1s;
}

@-webkit-keyframes load 
{ 5% {
    margin-top: -2em;
    position: absolute;
  }
  100% {
    margin-top: 0;
  }
}

   @-moz-keyframes load 
{ 5% {
    margin-top: -2em;
    position: absolute;
  }
  100% {
    margin-top: 0;
  }
}

     @-o-keyframes load 
{ 5% {
    margin-top: -2em;
    position: absolute;
  }
  100% {
    margin-top: 0;
  }
}

        @keyframes load 
{ 5% {
    margin-top: -2em;
    position: absolute;
  }
  100% {
    margin-top: 0;
  }
}