Today we are really happy to share our first tutorial with our dear followers. In this tutorial we will teach you how to set a page loading animation effect on the HTML templates / WordPress themes. Some websites may have seen in the page loading effects, if you do not know how to do this effect, you should carefully read our article. Let’s see how to make page loading animation with jQuery and CSS;
You Will Need to Complete This Tutorial:
The CSS Markup
In the first step, you need to add these style codes to the your style.css file I share with you below;
margin:-100px 0 0 -100px;
Please download preloader gif images, and rename which you want to loading.gif.
The HTML Markup
Let’s add our markup for the any page section. This will have one side. Please add these codes to the your any page template “after body tag”.
<div class="loader">Page Loading...</div>
The jQuery Markup
You can edit this code .delay(600) by yourself. (how much you want to waiting time)
Congratulations, you’re all finished! Your preloader animation effect ready! There you have it, we’ve teach you how to set a page loading animation effect on the HTML templates / WordPress themes.
Leave a comment and let me know what you think. What would you have done differently?