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动画进度条的方式

＆＃13;

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

＆＃13;

<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>

＆＃13;

uikit框架 - 进度条动画零值

1 个答案: