Welcome to the free site template! If you are looking premium template I recommended you Jollyany!

Close Notification

Tutorial: Adding a Page Loading Animation on the HTML Templates

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:

Live Preview

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;

Please download preloader gif images, and rename which you want to loading.gif.

page loading animation

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”.

The jQuery Markup

In this step, you should add standard jQuery file and Javascript plugin to the your website. If you have a jQuery code on your site, you do not need to add it.

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?