<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>
Preview:
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