Loading CSS Ellipsis

index.html

<div class="loading_ellipsis">
    Loading
  <span class="one"></span>
  <span class="two"></span>
  <span class="three"></span>
</div>

LoadingEllipsis.markdown

Loading CSS Ellipsis

A Pen by Nikolina Spirkovska on CodePen.

License.

style.css

.loading_ellipsis {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    padding: 20px;
    text-align: center;
  }
 
  .loading_ellipsis span {
    background: #000;
    border-radius: 50%;
    display: inline-block;
    height: 3px;
    width:  3px;
    margin-right: 4px;
    
    animation: loading_dots 0.8s linear infinite;
      -webkit-animation:  loading_dots 0.8s linear infinite;
      -moz-animation:     loading_dots 0.8s linear infinite;
      -ms-animation:      loading_dots 0.8s linear infinite;
  }
    .loading_ellipsis .two {
        -webkit-animation-delay:  0.2s;
    }

    .loading_ellipsis .three {
  	    -webkit-animation-delay:  0.4s;
    }
 
  @-webkit-keyframes loading_dots {
    0% { background: #eee; width: 3px; height: 3px; margin-right: 4px; }
    25% { background: #ccc; width: 5px; height: 5px; margin-right: 2px; }
    33% { background: #333; width: 3px; height: 3px; margin-right: 4px; }
   100% { background: #000; width: 3px; height: 3px; margin-right: 4px; }
  }

http://codepen.io/nikolinass/pen/LEqOgm