How To Add YouTube's Laser Progress Bar To WordPress


Your Website have a beautiful Design and lots of Quality content, but there are still ways to improve the users interaction with your website. So today we are going to focus on the youtube Laser like Loading Style. So if you have been to youtube recently then you may have noticed the Laser Progress Bar.

What it Does?

Your users are valuable and many users uses different types of devices with different Internet connection ranging from EDGE to 4G, and depending on their connection your website may load like a laser  or a tortoise. So the Youtube like laser progress bar displays how much of your content is loaded in the browser and how long they have to wait.

So they next question is can Add YouTube Laser Progress Bar to your WordPress Website or HTML website?

So we can just say that, its very simple just copy the codes and paste it where we say. In order to provide you the best loading bar available on the Internet, we searched thousands of websites, forum and discussion group and at last found one YNH webdev.

YNH webdev has created this by using jQuery, CSS and HTML, which on pasted or applied on your website adds a YouTube like Laser progress bar. The code uses an Ajax start handler which works on HTMl websites and $(document).ready handler for WordPress.

Have the live demo of laser progress bar before commiting changes to your website – DEMO

How to Add YouTube Like Laser Progress Bar to WordPress Website?

To do so, follow this steps

On WordPress

WordPress admin area > Appearance > Editor > functions.php
and check this code is on the script. If not add the following lines at the end of the script

and click on Update.


WordPress admin area > Appearance > Editor > header.php



In case of HTML, find your navbar and add the following lines


Now thats done. All you need is to update the files and if you use  cache then clear it and See the Laser shooting at you. Just kidding, See the Laser At Work.

Code credit: YNH webdev


Editorial Staff at SmartActiveBlogger is a team of WordPress experts led by Niraj Kashyap. Page maintained by Niraj Kashyap.

4 thoughts on “How To Add YouTube's Laser Progress Bar To WordPress”

  1. Blue Crystal manufactures a wide range of products – all under one roof, right from 3D Laser Engraving inside the Crystal glass and normal glass. The manufacturing crystal glass mementos, gifts, trophies, 2D and 3D Laser Engraving.

    for more info

  2. This code works great but what youtube does is slightly different where in the progress bar starts once a link is clicked but this code make the progress bar start not when the link is clicked but after the link is clicked but when the target page appears on screen but not fully loaded. can this code be tweaked for the progress bar to start when a link is clicked rather than when the target page appears ?

Comments are closed.