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);
});
