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

Must Read

Four Things You Most Likely Didn’t Know About Guest Post Service

Guest Posting is a great way to raise awareness and build links. However, before starting a guest...

How Does Blogger Outreach Help Your Brand Grow?

Bloggers are eager to promote their content and engage their readers, so building relationships with them are...

How To Get Your Startup Noticed

Being an entrepreneur is always a learning experience. That's because the rules are constantly changing. The change...
Shrinivas
Hi, this is +Shrinivas. I am a freelance web developer and part time blogger having skills in WordPress, HTML/CSS, jQuery, PHP and CodeIgniter.

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.

progress bar to WordPress website

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

- Advertisement -

Latest News

Four Things You Most Likely Didn’t Know About Guest Post Service

Guest Posting is a great way to raise awareness and build links. However, before starting a guest...

How Does Blogger Outreach Help Your Brand Grow?

Bloggers are eager to promote their content and engage their readers, so building relationships with them are essential to growing your brand....

How To Get Your Startup Noticed

Being an entrepreneur is always a learning experience. That's because the rules are constantly changing. The change happens so subtly that you...

The Benefits of Treemapping for Data Analysis

Treemapping is a great tool for data analysis because it allows you to see the big picture and the details at the...

Tips for driving more traffic to your engineering blog

Over the last two decades, blogging has transformed from being a somewhat hobbyist pursuit to a fully-fledged sector of the internet that...

More Articles Like This

- Advertisement -