Loader 2

HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Center the loader */ #loader { position: absolute; left: 50%; top: 50%; z-index: 1; margin: -20px 0 0 -20px; border: 4px solid #333; border-top: 4px solid #555; border-bottom: 4px solid #000; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEUAAABPT09PI3z5AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfiAgQAGyT3z/tVAAAAFklEQVQI12OwZ2Cob2D4fwAdAQXtGQDDgwz3SpwhkwAAAABJRU5ErkJggg==') center; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s steps(7) infinite;} @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } /* Add animation to "page content" */ .animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s } @keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } } #myDiv { display: none; text-align: center; } </style> </head> <body onload="myFunction()" style="margin:0;"> <div id="loader"></div> <div style="display:none;" id="myDiv" class="animate-bottom"> <h2>Tada!</h2> <p>Some text in my newly loaded page..</p> </div> <!-- <script> var myVar; function myFunction() { document.getElementById("loader").style.display = "none"; document.getElementById("myDiv").style.display = "block"; } </script> --> </body> </html>
CSS
JAVASCRIPT
Expand for more options Login