фреймворк uikit - анимация индикатора выполнения от нуля до значения - PullRequest
Новая
       7

фреймворк uikit - анимация индикатора выполнения от нуля до значения

0 голосов
/ 03 мая 2018

Я хочу анимировать индикатор выполнения от 0 до значения, когда пользователь входит / загружает страницу.

Я работаю над примером здесь: JSFiddle 

<progress id="js-progressbar" style="direction:rtl;" class="uk-progress" value="50" min="0" max="100"></progress>

   UIkit.util.ready(function () {


    var bar = document.getElementById('js-progressbar');

    var animate = setInterval(function () {

        bar.value += 10;

        if (bar.value >= bar.max) {
            clearInterval(animate);
        }

    }, 1000);


});

В этом примере пошаговая анимация прогрессирует шаг за шагом.

ты можешь мне помочь? Заранее спасибо.

1 Ответ

0 голосов
/ 03 мая 2018

Самый простой способ - сократить время и значение шага, чтобы анимация была более плавной (см. Пример), но чтобы сделать ее действительно анимированной, лучше использовать 2 индикатора выполнения (один держатель и один с заданной шириной) , где вы анимируете ширину, которая может быть сделана с помощью CSS и выглядит намного лучше. Вот как Bootstrap анимирует индикаторы выполнения 

UIkit.util.ready(function() {
  var bar = document.getElementById('js-progressbar');
  var animate = setInterval(function() {
    bar.value += 1;

    if (bar.value >= bar.max) {
      clearInterval(animate);
    }
  }, 5);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<progress id="js-progressbar" style="direction:rtl;" class="uk-progress" value="10" min="0" max="100"></progress>
...