メインコンテンツへスキップ

ドキュメント

プログレス

処理がどこまで進行しているかを示すプログレスバーを定義します。

使用方法

このコンポーネントを適用するには、<progress> 要素に .uk-progress クラスを追加します。

<progress class="uk-progress" value="" max=""></progress>
  • <progress id="js-progressbar" class="uk-progress" value="10" max="100"></progress>

<script>

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

    });

</script>