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

Question

Я хочу анимировать индикатор выполнения от 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);


});

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

вы не могли бы мне помочь? Заранее спасибо.

Answer 1

Самый простой способ - сократить время и значение шага, чтобы анимация была более плавной (см. Пример), но чтобы сделать ее действительно анимированной, лучше использовать 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>