1

I see a lot of example progress bars that show the progression bar being filled up. However, I would just like to know how I could make a progress reflect step by step form progress. A good example of what I would want can be seen Here. Any helpful code or examples/demos from other pages would be good to have.

Thanks!

dsolimano
  • 8,870
  • 3
  • 48
  • 63
isaac h
  • 45
  • 1
  • 3
  • 1
    I think this question is too broad for Stack Overflow. You have to at least show us [what you've tried](http://whathaveyoutried.com/). – Joseph Silber Aug 01 '12 at 17:21
  • 1
    http://css-tricks.com/examples/ProgressBars/ there is css – treng Aug 01 '12 at 17:21
  • possible duplicate http://stackoverflow.com/questions/5213753/build-step-progress-bar-css-and-jquery – gherkins Aug 01 '12 at 17:22
  • 2
    @riwette: I actually use that progress bar in my own app. However, I think he's after discrete steps rather than % complete. – Eric J. Aug 01 '12 at 17:25

1 Answers1

6

If you like the Buffalo one, just have a look at how they do it.

First they define a div like this:

<div id="progress">
    <div id="complete" class="s1">
        <div id="marker"></div>
    </div>
</div>

Then they use CSS to render the div based on the progress (which is controlled with class="s1" and so on).

/**
 * PROGRESS
 */
#progress,#complete {
    width: 520px;
    margin: 1px 0 19px;
    height: 32px;
    background:url(/img/backgrounds/progress.png);
    position:relative;
}
#complete {
    background-position: 0px 57px;
    margin-top: 0;
}
#complete #marker {
    position: absolute;
    top: 0;
    right: -26px;
    background:url(/img/backgrounds/markers.png);
    width: 26px;
    height: 32px;
}
#progress .s1 {
    width: 19px;
}
#progress .s2 {
    width:111px;
}
#progress .s3 {
    width:203px;
}
#progress .s4 {
    width:295px;
}
#progress .s5 {
    width:386px;
}
#progress .s6 {
    width:478px;
}
#progress .s2 #marker {
    background-position: -26px 0;
}
#progress .s3 #marker {
    background-position: -52px 0;
}
#progress .s4 #marker {
    background-position: -78px 0;
}
#progress .s5 #marker {
    background-position: -104px 0;
}
#progress .s6 #marker {
    background-position: -130px 0;
}

The CSS manipulates images to show the desired state

enter image description here

enter image description here

Eric J.
  • 147,927
  • 63
  • 340
  • 553
  • Would any Jquery be necessary in this? I don't necessarily need animation. I just need to show that the user's progression through each page. – isaac h Aug 01 '12 at 17:34
  • No jQuery required. In fact, no JavaScript required. This is pure CSS. On each page you just update `class="s1"` to `class="s2"` and so forth. You'll need to create your own images and change the values of `background-position` and `width` in the CSS to match the size of your own images. – Eric J. Aug 01 '12 at 18:00