Syamsul 'isul' Arifin

<div id="loader">
<div id="loader_box">
<div id="loader_animation"></div>
</div>
</div>
<div id="content">
 // Your content here
</div>

body, html {
margin: 0;
padding: 0;
}
#loader {
display: block;
width: 100%;
height: 100vh;
background-color: #000000;
position: fixed;
z-index: 1;
}
#loader_box {
display: block;
top: 50%;
left: 50%;
width: 200px;
height: 30px;
background-color: #ffffff;
transform: translate(-50%, -50%);
position: absolute;
}
@keyframes loaderanimation {
0% {left: 5px;}
100% {left: 175px;}
}
#loader_animation {
position: absolute;
top: 5px;
width: 20px;
height: 20px;
background-color: red;
animation-name: loaderanimation;
animation-direction: alternate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

<script>
window.onload = function () {
setTimeout(function(){$('#loader').fadeOut(1000)},2000)	
}
</script>