CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Alias
Alias

Reputation: 3091

Bootstrap 3: Reverse Animated Progress Bar

Seen answers for 2.0, but they seem to work differently for 3.0.

I want to reverse the progress bar animation in Bootstrap 3, so it moves left to right, rather than the default right to left.

I've looked in the Bootstrap CSS, and there is transition: width .6s ease; however I'm not sure how it determines which way the stripe effect moves.

Thanks.

Upvotes: 14

Views: 9604

Answers (4)

Hicham
Hicham

Reputation: 69

I solved it rotating the progress bar, here is an example:

.progress-bar {
    transform: rotate(180deg);
}

https://codepen.io/anon/pen/jGYqrx

Upvotes: 6

Milad Ghiravani
Milad Ghiravani

Reputation: 1683

progress bar animate from right to left:

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

progress bar animate from left to right:

.progress.active .progress-bar {
  -webkit-animation: reverse progress-bar-stripes 2s linear infinite;
     -moz-animation: reverse progress-bar-stripes 2s linear infinite;
      -ms-animation: reverse progress-bar-stripes 2s linear infinite;
       -o-animation: reverse progress-bar-stripes 2s linear infinite;
          animation: reverse progress-bar-stripes 2s linear infinite;
}

Upvotes: 0

No Results Found
No Results Found

Reputation: 102745

If you want to make the progress bar animate from left to right, you can do this by setting the animation-direction property to reverse.

In BS3's css file there is this section:

.progress.active .progress-bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

You can add a class of your own to add the required setting (default is normal):

.progress.active.my-reverse-class .progress-bar {
  -webkit-animation-direction: reverse;
     -moz-animation-direction: reverse;
      -ms-animation-direction: reverse;
       -o-animation-direction: reverse;
          animation-direction: reverse;
}

However, note that UX studies have shown that right-to-left animation for progress bars feels "faster" to most users: https://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate-backwards

Upvotes: 15

Tom Lagier
Tom Lagier

Reputation: 360

Ooh! Ooh! I got this one. You can swap the direction of the progress bar by setting the bar as float: right. It should function exactly the same.

Upvotes: 5

Related Questions