Demo-LIve Demo Loading
code-Create a Index.html file
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://cdn.dribbble.com/users/830587/screenshots/4381223/loader_gif.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}
</style>
</head>
<body>
<div class="loader"></div>
<br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer orci nunc, congue id lectus nec, ultricies sodales mi. Mauris tristique varius venenatis. Sed laoreet aliquam nisl eu vulputate. Donec non ex ac justo mattis fermentum. Nunc molestie enim sit amet augue gravida, non scelerisque lacus elementum. Mauris venenatis sit amet lectus non commodo. Sed convallis porta leo eu tincidunt. Cras augue quam, aliquet ac eros eget, ultricies tincidunt sem.
Pellentesque ornare accumsan blandit. Nulla iaculis augue urna, ac rutrum ante ultricies vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam ut massa maximus, dignissim felis nec, vehicula justo. Cras ullamcorper quis justo sed eleifend. Maecenas mattis consequat elementum. Integer gravida, purus sed placerat scelerisque, sapien felis gravida sem, quis fermentum lorem turpis eget lectus. Nulla fermentum, est aliquet dignissim ultrices, urna dui placerat ipsum, non faucibus nisi orci vitae nisi. Sed iaculis orci sit amet vehicula tempus. Vivamus sodales dui vel nulla facilisis, rutrum egestas lorem maximus. Ut at dolor sit amet ipsum congue tincidunt. Mauris at neque eget ante auctor dictum. Nulla accumsan interdum lobortis. Vivamus egestas viverra arcu, gravida bibendum tortor aliquam id.
</h1>
</body>
</html>
ConversionConversion EmoticonEmoticon