Simple Loader

HTML
<div class="wrapper"> <div class="counter"> <h1>0%</h1> <hr/> </div> </div>
CSS
* { box-sizing: border-box; margin: 0; } body { padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; font-family: Roboto; } .wrapper { background: #222; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .counter h1 { color: white; font-size: 60px; margin-top: -10px; } .counter hr { background: #2ecc71; border: none; height: 6px; } .counter { position: relative; width: 200px; text-align: center; }
JAVASCRIPT
$(document).ready(function() { var counter = 0; var c = 0; var i = setInterval(function(){ $(".wrapper .counter h1").html(c + "%"); $(".wrapper .counter hr").css("width", c + "%"); counter++; c++; if(counter == 101) { clearInterval(i); } }, 50); });
Expand for more options Login