CSS animated loading dots

dabblet.css

/*
	CSS animated loading dots
*/
body
{
  background: #5A5C64;
}


  .loading_dots
  {
    background-color: rgba(0,0,0,0.2);
    border-radius: 0px;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.3),
               0 1px 0 rgba(255,255,255,0.3);
               
    font-size: 1em; /* set size here */
    
    line-height: 1;
    padding: 0.125em 0 0.175em 0.55em;
    width: 4.50em;
    
    /*
      position just for demo
    */
    margin: 20% auto;
  }

  .loading_dots span
  {
    background: transparent;
    border-radius: 0%;
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    display: inline-block;
    margin: auto -1px;
    height: 0.6em;
    width:  0.6em;

      -webkit-animation:  loading_dots 0.8s linear infinite;
      -moz-animation:     loading_dots 0.8s linear infinite;
      -ms-animation:      loading_dots 0.8s linear infinite;
    animation:            loading_dots 1.8s linear infinite;
  }
    .loading_dots span:nth-child(2)
    {
      animation-delay:            0.2s;
    }
    .loading_dots span:nth-child(1)
    {
      animation-delay:            0.8s;
    }
    
 .loading_dots span:nth-child(3)
    {
      animation-delay:            0.4s;
    }
    
 .loading_dots span:nth-child(4)
    {
      animation-delay:            0.4s;
    }
    
 .loading_dots span:nth-child(5)
    {
      animation-delay:            0.2s;
    }
    
    
 .loading_dots span:nth-child(1)
    {
      animation-delay:            0s;
    }




/*
  Define the animation for every efing vendor prefix
*/
  @-webkit-keyframes loading_dots
  {
    0% {
      background: transparent;
    }
    50% {
      background: #E42222;
    }
    100% {
      background: transparent;
    }
  }
  
  @-moz-keyframes loading_dots
  {
    0% {
      background: transparent;
    }
    50% {
      background: #E42222;
    }
    100% {
      background: transparent;
    }
  }
  @-ms-keyframes loading_dots
  {
    0% {
      background: transparent;
    }
    50% {
      background: #E42222;
    }
    100% {
      background: transparent;
    }
  }
  @keyframes loading_dots
  {
    0% {
      background: transparent;
    }
    20% {
      background: #E42222;
    }
    60% {
      background: transparent;
    }
  }

dabblet.html

<div class="loading_dots">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>

</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}