Scrolling Progress Bar with jQuery & CSS3

Download   Demo

Introduction

Today I will be creating an animated progress bar that updates the progress based on how far you scrolled into a content section. I saw this effect in action in the quick start installation guide for DesignWall.

Progress Bar Structure

There are two parts to this progress bar effect. The content and the bars. Each section of the content has an id which helps calculate the percentage. Each bar has a link to smooth scroll to that section.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<div class="content">   <div id="intro">     <h2>Introduction</h2>     <p>Content</p>   </div>   <div id="part-1">     <h2>Part 1: Do this thing!</h2>     <p>Content</p>   </div>   <div id="part-2">     <h2>Part 2: Do that other thing!</h2>     <p>Content</p>   </div>    </div> <div class="progress">   <div class="wrapper">     <div class="bar">       <a href="#intro">Introduction</a>       <i class="icon-ok"></i>       <span></span>     </div>     <div class="bar">       <a href="#part-1">Part 1: Do this thing!</a>       <i class="icon-ok"></i>       <span></span>     </div>     <div class="bar">       <a href="#part-2">Part 2: Do that other thing!</a>       <i class="icon-ok"></i>       <span></span>     </div>   </div> </div>

CSS Styles

The progress bars are fixed positioned when you scroll down the page. The progress bars themselves have a background color and a span element that has its width animated to simulate the progress bar.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

.content   width: 60%;   float: left;   margin: 45px 0;   padding: 0 3% 0 0;   border-right: 1px solid rgba(255,255,255,.4); .progress   position: relative;   float: left;   text-align: left;   width: 330px;   padding: 45px 0 0 2%;   .progress .wrapper     position: absolute;     width: inherit;        .progress .wrapper.affix       position: fixed;       top: 10px;        .progress .bar     position: relative;     display: block;     width: 100%;     height: 40px;     margin-bottom: 10px;     background-color: #1c92db;      .progress .bar span     position: absolute;     display: block;     top: 0;     width: 0;     height: 40px;     z-index: 0;     background-color: #1275b7;      .progress .bar a     line-height: 40px;     position: relative;     z-index: 1;      .progress .bar i     position: absolute;     right: -30px;     height: 40px;     line-height: 40px;     color: #36a7f3;     -webkit-transition: color .3s;     transition: color .3s;

jQuery

Here is where the code calculates the percentages. Using a mixture of scrollTop and offsets of the sections height.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

var wrapper_top = $(".progress .wrapper").offset().top; $(window).scroll(function ()     var wrapper_height = $(".progress .wrapper").height();     // Affixes Progress Bars   var top = $(this).scrollTop();     if (top > wrapper_top - 10)         $(".progress .wrapper").addClass("affix");          else         $(".progress .wrapper").removeClass("affix");          // Calculate each progress section     $(".content div").each(function(i)         var this_top = $(this).offset().top;         var height = $(this).height();         var this_bottom = this_top + height;         var percent = 0;         // Scrolled within current section         if (top >= this_top && top <= this_bottom)             percent = ((top - this_top) / (height - wrapper_height)) * 100;             if (percent >= 100)                 percent = 100;             $(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");                          else                 $(".progress .wrapper .bar:eq("+i+") i").css("color", "#36a7f3");                                                                 else if (top > this_bottom)             percent = 100;             $(".progress .wrapper .bar:eq("+i+") i").css("color", "#fff");                  console.log(i);         $(".progress .wrapper .bar:eq("+i+") span").css("width", percent + "%");     ); );

Scrolling Progress Bar with jQuery & CSS3