Preview:
<style>

 #loderp {
  position: relative;
  margin: auto;
  width: 100%;
 }

 #loder {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: auto;
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
 }
 #loder span {
     width: 12px;
     height: 17px;
     background: #F39C12;
     margin: 0px 2px;
     display: inline-block;
     vertical-align: middle;
     animation-name: lodering;
     animation-duration: 450ms;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     -webkit-animation-name: lodering;
     -webkit-animation-duration: 450ms;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -moz-animation-name: lodering;
     -moz-animation-duration: 450ms;
     -moz-animation-iteration-count: infinite;
     -moz-animation-direction: alternate;
 }
 #loder span:nth-of-type(2) {
     animation-delay: 0.2s;
 }
 #loder span:nth-of-type(3) {
     animation-delay: 0.4s;
 }
 #loder span:nth-of-type(4) {
     animation-delay: 0.6s;
 }
 @keyframes lodering {
     0% {
         height: 17px;
     }
     100% {
         height: 38px;
     }
 }
 @-webkit-keyframes lodering {
     0% {
         height: 17px;
     }
     100% {
         height: 38px;
     }
 }
 @-moz-keyframes lodering {
     0% {
         height: 17px;
     }
     100% {
         height: 38px;
     }
 }

</style>

<br><div id='loderp'><div id='loder'><span></span><span></span><span></span><span></span></div></div><br>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter