Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Navigation progress bar

Navigation progress bar


I'm trying to build progress menu bar(similar to one on the piccsy investors )

It measures the height of the page and progresses %.

Any ideas on how to do it?

Thanks, Nikola.

Problem courtesy of: MorrinWellSmith


Here you have a solution for this issue.

First of all the div:

Now some styling:



And finally the jQuery code:

var bar = $('#bar'),
    $window = $(window),
    docHeight = $(document).height(),
    baseX = $window.height() / docHeight * 100;

bar.css('background', '-webkit-linear-gradient(left, red '+ baseX +'%, green '+ baseX +'%)');

$window.scroll(function(e) {      
    var x = $window.scrollTop() / docHeight * 100 + baseX;
    bar.css('background', '-webkit-linear-gradient(left, red '+ x +'%, green '+ x +'%)');

​You can find a working example in jsfiddle.

Note that this only works in Google Chrome, as I have only used -webkit-linear-gradient. If you want to make sure it works in all browsers you should add its specific property. You may find useful Prefixr for that.

Solution courtesy of: admenva


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Navigation progress bar


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription