Adding Loading effect to Your website in easy way
Its a great idea to show a cool animated image until your website is loading? Of Course, it will improve your site’s user experience.
Almost all the latest themes on Themeforest come with preloaders. Adding preloader will display a loading animation until the page has been completely loaded.
In this tutorial, I’ll show you the simplest way for adding preloaders to a website using only jQuery and CSS.
Steps to create loader for your website
1. Add a loading DIV after the body div starts.
<div class="loading">
<div class="loader"></div>
</div>2. Add some CSS to show the loading div on fullscreen.
.loading{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
z-index: 999;
background-color: #ffffff;
}3. Add some CSS to show the loading effter to loader div.
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
}
@keyframes spin {
v
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}4. adding jQuery to your webpage at the end of the before closing Body tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>5. adding jQuery fade out the preloader animation once the page has been completely loaded.
<script type="text/javascript">
$(window).load(function() {
$(".loading").fadeOut("slow");
});
</script>Demo here: Demo
Download from: Download