Awesome

I need this progress bar vertically, can someone please help me?

did you ever figure out how to get this vertically?

Nice

What is controlling the animation from one step to the next? I get a strange animation when the bar fills up from each step. You'll see two divs filling up at the same time (from left to right). Any way of making it a little more smooth with the 2nd div filling up after the 1st div is complete? Or turning off the animation? See image. http://imgur.com/fehMgJg

Found it in the bootstrap.css file. I had to override the 3 transition properties.

.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
/*-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;*/
}

You don't need to change bootstrap. I only changed the following css rules:

.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {

transition-timing-function: linear;

transition-duration: 1s;

width:100%;

}

.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {

transition-timing-function: linear;

transition-delay: 1s;

transition-duration: 1s;

width:50%;

}

If I put this inside a modal, a white break appears halfway between last 2 steps. You can see it here: http://bootsnipp.com/user/s.... Any ideas why modal is messing things up?

Screenshot: http://i.imgur.com/ptix9ne.png

I think it is because the width of the col-xs-4 is set to 33.333333% in the Bootstrap CSS so you get this interesting problem where that 0.111111% is the line that you are seeing in between the divs.

Hmmm... Seems logical. For now I'm handling with a -1px margin.

Ok, so the minimum you need to counteract the rounding error is -0.2px

.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%;margin-left:-0.2px}

or better yet:

.bs-wizard > .bs-wizard-step:last-child > .progress {width: 50%; margin-left:-0.111111%} :)

Thanks

Thanks

How to move the progress bar to the left

Like a boss.

This is pretty easy to retcon into 2.3.2 as well: just replace the .col-xs-3 classes with an appropriate .spanN, and change the .progress-bar classes to .bar in both the HTML and CSS.

can't get in working in bootstrap 2.3.2, there a bunch of empty space left between steps. Can you please share your CSS or a link to your implementation?

This is lifted straight out of a working version of a site: https://gist.github.com/pet...

Awesomeness, thanks so much! So added .bs-wizard > .bs-wizard-step {margin: 0 -1px 0 0; ... } is what made a difference.
Any idea on how to make this responsive? It works on desktop, but breaks on mobile. The original bootstrap 3 version resizes properly.

My guess is that's because the .col-xs-3 classes are responsive in BS3 but the .spanNs didn't work the same way in 2.3.2.