What is the page loading indicator?

It is a small line bar that indicates the loading of the page when the user opens your website and disappear after the page has loaded completely.



What is the use of it?

It tells the users that the page is still loading and attracts your users to your website.


Does it affect the SEO of the site?

No, we have optimized the code to be friendly with SEO(Search engine optimization) so you need not be worried but if you have taken the code from other sites then it couldn't be SEO friendly.


Get the code: -

Code will appear in 15 seconds.


1. Setup in blogger: -

  • Firstly go to your blogger dashboard and navigate to theme>Edit HTML.
  • Now copy the CSS code from above and paste it just below the head tag(if you don't know the head tag then press ctrl+f and search for  <head  and paste the code below it)
Screenshot after placing the code: 


  • Now copy the javascript code and paste it below CSS code which you just placed in the above steps.
  • Lastly, copy the HTML code and paste it below the starting of body tag( If you don't know what is body tag then press ctrl+f and search <body and paste it below it).
Screenshot after placing the code: 
  • Now if you need to change the color width of the loading indicator bar then change these details: -
  1. For height of the bar change the height in the attribute #progress search for #progress in CSS code and inside it you will find height: 2px change 2px to your convenient height.
  2. For color of the bar change the color in the attribute #progress search for #progress in CSS code and inside it you will find background: #b91f1f; change #b91f1f to your convenient color for more help use our HTML color picker tool.
  3. For more help contact us at contact@tech-solution.xyz.
  • Now your loading indicator is ready and please comment us below and tell us about how was this post and for any doubts also and for requesting a new post please comment us below we will do it for you.

2. Setup in WordPress

  • Firstly go to your WordPress dashboard and navigate to plugins>add new.
  • Now search for a plugin called 'Insert Headers and Footers' and install it.
  • Now activate the plugin go to the plugin dashboard and insert the CSS code and Javascript code inside the first Section that is inside the head section and insert the HTML code inside the second section that is in the body section.
  • Now if you need to change the color width of the loading indicator bar then change these details: -
    1. For height of the bar change the height in the attribute #progress search for #progress in CSS code and inside it you will find height: 2px change 2px to your convenient height.
    2. For color of the bar change the color in the attribute #progress search for #progress in CSS code and inside it you will find background: #b91f1f; change #b91f1f to your convenient color for more help use our HTML color picker tool.
    3. For more help contact us at contact@tech-solution.xyz.
  • Now your loading indicator is ready and please comment us below and tell us about how was this post and for any doubts also and for requesting a new post please comment us below we will do it for you.

Post a Comment

Previous Post Next Post