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

If you love watching videos on YouTube then you might have noticed the new laser loading bar of YouTube, this progress bar appears above the YouTube logo whenever you navigate to the new video in YouTube.

Is It Possible to Add YouTube Laser Like Progress Bar to WordPress Website?

I thought of using the same laser progress bar in one of our blog as this progress bar looks pretty well when we navigate through different pages of our blog.

I searched for the web for YouTube’s laser like progress bar code to use in our WordPress blog and got some hints from YNH webdev. This guy has come up with CSS and jQuery which adds YouTube laser progress bar to website, YNH webdev’s code uses ajaxStart handler which didn’t work in WordPress and hence I used the simple $(document).ready handler to add progress bar to WordPress.

See the live demo of laser progress bar before continuing. (navigate through pages)

How to Add Laser Like Progress Bar to WordPress Website?

Just go through the steps below to add laser progress bar to WordPress blog

1. Login to your WordPress admin area
2. Click on “Appearance” option under “Editor” menu
3. Click on “Theme Functions” (functions.php) and add the following code at the end

   wp_enqueue_script('jquery');

   and update the file by clicking “Update file”

4. Now click on “Header” (header.php) and add the following code below </header> tag

<!--Youtube like progressbar code start-->
<style>
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>
<!--Youtube like progressbar code end-->

That’s it now update the file and you should see the new YouTube laser progress bar whenever you navigate through your blog pages.

Subscribe to our Facebook fan page for such blog customization tips.

Code credit: YNH webdev