When it comes to the layout of the website then it matters a lot for SEO, Traffic and to get approval in ads serving organizations. For that, we need to improve our website layout and speed. You can check your website’s speed in Page Speed Insights or any other sites. Ensuring the quality content you should provide an awesome experience for your visitors on your site.

Well you might be wondering how can I provide an awesome experience for my visitors. In such a condition you can add a loading bar on your website with ajax and jquery which also increase the performance speed of your site. Well, today I’ve got the best trick how can you add a loading bar when loading your site. These types of loaders are in sites like YouTube, Instagram which makes us easier to use these sites. 

To show a beautiful loading bar in your site you have to follow only two steps

Step 1. Go to Your Blogger Dashboard >> choose Theme >> click the Edit HTML button as shown in the image below:




Step 2. You need to find ]]></b:skin> in your template just by clicking Ctrl+F from your keyboard
Step 3. After that, you need to paste a bit of CSS code just before ]]></b:skin>

CSS Code

/* Loading Bar - By Himal Guragain*/.
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #bf0711;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 3px;
}

Note: To change the color of the loader you just need to change the HTML Color code in the CSS 

Step 3. You need to find </body> in your template and paste a bit of Javascript Code before it.

Javascript Code

<script src="https://raw.githubusercontent.com/HubSpot/pace/v1.0.0/pace.min.js" />

That's it. Now a beautiful loading bar exactly like that of youtube will be displayed on your site.

Final Word

If you didn't understand any of the steps then the comment box is yours. I will fully assist you. 

Post a Comment

Previous Post Next Post