Bootstrap 3: обратная анимационная панель прогресса

Увидели ответы для 2.0, но они, похоже, работают по-разному для 3.0.

Я хочу отменить анимацию индикатора выполнения в Bootstrap 3, поэтому она перемещается влево-вправо, а не по умолчанию справа налево.

Я посмотрел в Bootstrap CSS, и есть transition: width .6s ease;, но я не уверен, как он определяет, каким образом перемещается эффект полосы.

Спасибо.

Ответы

Ответ 1

Если вы хотите, чтобы индикатор выполнения отображался слева направо, вы можете сделать это, установив для свойства animation-direction значение reverse.

В файле BS3 css есть этот раздел:

.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;
}

Вы можете добавить собственный класс, чтобы добавить требуемый параметр (по умолчанию это 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;
}

Однако обратите внимание, что в UX-исследованиях показано, что анимация справа налево для индикаторов прогресса кажется "быстрее" большинству пользователей: https://ux.stackexchange.com/questions/18361/why-do-progress-bars-animate-backwards

Ответ 2

Ooh! Ooh! Я получил это. Вы можете поменять направление полосы выполнения, установив планку как float: right. Он должен функционировать точно так же.

Ответ 3

Я решил, что он вращает индикатор выполнения, вот пример:

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

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

Ответ 4

индикатор выполнения от справа налево:

.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.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;
}