WordPress Page Loading Animation Guide

Want to add page loading animation just like on androidBLOG. If you are using any WP plugin to display loading animation it might affect page speed test of your site & may conflict with other plugins. In this method we are using jQuery script to display page loading. WordPress Page Loading Animation Guide helps you to add loading animation code to stylesheet & theme header file with step by step picture guide.

Before adding code to any files you need to create Child theme for your current theme. Just follow this Guide it will take only 5 minute to create.

WordPress Page Loading Animation Guide

 

1. Add jQuery code in parent theme’s header.php file’s above Head tag

WordPress Page Loading Animation Guide

Go to Appearance > Editor

in Select theme to edit menu on right top side & select Parent theme

Click on Theme Header (header.php) to edit

Download below jQuery code & Paste it in this file & Update file

***You Must be logged in to view Download Links***

Delete Cache & Minified CSS/JS if you are using any caching plugins (i.e. W3 total cache, WP super cache or any)




2. Add loading code in parent theme’s header.php file’s below Body tag

loading code

Go to Appearance > Editor

in Select theme to edit menu on right top side & select Parent theme

Delete Cache & Minified CSS/JS if you are using any caching plugins (i.e. W3 total cache, WP super cache or any)

3. Add loading animation code in child theme’s style.css file

loading animation code

Go to Appearance > Editor

in Select theme to edit menu on right top side & select Newly created child theme

Click on Stylesheet (Style.css) to edit

Download loading animation code & Paste it in this file & Update file

***You Must be logged in to view Download Links***

Delete Cache & Minified CSS/JS if you are using any caching plugins (i.e. W3 total cache, WP super cache or any)

Just logout to your admin account & clear browser’s cache & Reload your site.

Leave your Feedback on – WordPress Page Loading Animation Guide

See how it looksThrought this WordPress Guide series wp-guide.xyz remains our DEMO WordPress blog in which we are going to perform all actions learnt from our Guide.

This Guide is a part of WordPress Guide series

If you find above post is useful

Don’t forget to give 5-star rating

Dhaval Bhatti

Dhaval Bhatti

Social by nature - Helps people for Android related stuff & to start their own blog based on WordPress by easy to follow guide.

You may also like...

Leave a Reply