Анимация индикатора выполнения jQuery

Я нашел этот хороший учебник по анимации индикатора выполнения:

http://www.cssflow.com/snippets/animated-progress-bar/demo

Однако индикатор выполнения не использует jquery, и в руководстве не рассказывается, как связать несколько кнопок с индикатором выполнения. Итак, после поиска я нашел этот учебник:

http://www.jcode.ninja/id/8561710

Я просто использовал код из приведенного выше руководства, просто чтобы посмотреть, смогу ли я заставить его работать.

Мой вопрос: как вы анимируете прогресс так же, как в первом уроке? Можно ли применить градиент, начиная с зеленого, затем переходя к оранжевому, а затем к красному. Я могу сделать это в фотошопе, что не проблема, но можете ли вы добавить его как «скин» индикатора выполнения, а не серый по умолчанию?

заранее спасибо


javascript jquery css
person user2982873    schedule 14.04.2015    source источник
comment
вам нужно анимировать полосу медленно правильно   -  person Selva    schedule 14.04.2015
comment
Привет, спасибо за ваш ответ. Извините, я не думаю, что мой первоначальный вопрос был достаточно ясен. Как вы говорите индикатору выполнения начать анимацию с помощью jQuery?   -  person user2982873    schedule 14.04.2015

Ответы (5)


arrow_upward
1
arrow_downward

Я использовал первый учебник и создал JSfiddle: https://jsfiddle.net/LgfcwxLu/

Что вам нужно сделать, так это добавить в .progress css градиент:

.progress {
   padding: 4px;
   background: #5fff32; /* Old browsers */
   background: -moz-linear-gradient(left,  #5fff32 0%, #ff9730 50%, #ff0000 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5fff32), color-stop(50%,#ff9730), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* IE10+ */
   background: linear-gradient(to right,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fff32', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
 }

Вы можете создать градиент с помощью этого инструмента: http://www.colorzilla.com/gradient-editor/< /а>

Дайте мне знать, если это поможет вам?

person Rotan075    schedule 14.04.2015
comment
Привет, спасибо за ответ. Сайт, над которым я работаю, должен работать с IE8. Будет ли css3 совместим? Если нет, можно ли использовать .png, если вместо этого установить его в качестве фона? - person user2982873; 14.04.2015
comment
Если вы посмотрите на мой код CSS, вы увидите, что последняя строка кода: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fff32', endColorstr='#ff0000',GradientType=1 ) ; /* IE6-9 */ говорит, что это должно работать и в IE8. Если это не так, вы можете использовать изображение в качестве фона. - person Rotan075; 14.04.2015

arrow_upward
0
arrow_downward

Вы можете использовать переходы css3 и изменение цвета фона. Вы устанавливаете переход, а затем, просто изменяя цвет фона, выполняется анимация. Проверьте эту скрипту: http://jsfiddle.net/en2cb2vq/

CSS-код:

.square {
    width: 50px;
    height: 50px;
  transition: background-color 0.5s ease;
  background-color: red;
}
.square.green {
  background-color: green;
}

HTML-код:

<a href="#">click me</a>
<div class="square"></div>

Javascript (с jQuery):

$("a").click( function() {
 $(".square").addClass("green"); 
    return false;
});
person Alfonso Jiménez    schedule 14.04.2015

arrow_upward
0
arrow_downward

это будет повторяющийся вопрос, уже заданный вопрос, попробуйте найти и достичь его, не задавайте такой вопрос, если ошибка в коде означает, что вы можете опубликовать проблему, http://progress%20bar%20animate

person Selva    schedule 14.04.2015

arrow_upward
0
arrow_downward

Вы можете просто применить стили из цветного индикатора выполнения к индикатору выполнения пользовательского интерфейса jQuery, включая полосы. В следующем jsfiddle я взял необходимый CSS и изменил имя класса .progress-bar в таблице стилей на .ui-progressbar-value. Чтобы изменить цвет, просто измените его с помощью встроенного jQuery или добавьте классы для каждого цвета и переключите класс с помощью jQuery.

см. скрипт. Это не идеально, но это даст вам представление.

person jazZRo    schedule 14.04.2015

arrow_upward
0
arrow_downward

Вы можете анимировать панель с помощью CSS Transition или .ui-progressbar-value.

.ui-progressbar-value{
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

Будьте осторожны: Transition не является кросс-браузерным. Ссылки: http://www.w3schools.com/css/css3_transitions.asp

РАБОЧИЙ ПРИМЕР:

http://jsfiddle.net/y2mg8ejk/

Резервные копии IE8/9

со старым браузером вы можете использовать и другой подход. Пользовательский интерфейс jQuery имеет color animation внутри исходного кода:

Я меняю свою Fiddle, чтобы использовать jquery вместо перехода:

Взгляните: http://jsfiddle.net/y2mg8ejk/2/

Пользовательский интерфейс jQuery — цветная анимация [doc]: http://jqueryui.com/animate/< /а>

Вы можете использовать это со старым браузером и transition с другим.

person Frogmouth    schedule 14.04.2015
comment
Привет. Спасибо за это. Есть ли какие-либо команды jquery, которые я мог бы использовать для анимации индикатора выполнения вместо переходов? Мой проект должен поддерживать IE 8 - person user2982873; 14.04.2015
comment
Привет еще раз, просто интересно, можно ли сделать приведенный выше пример с помощью анимации jquery? - person user2982873; 20.04.2015