进度条／Progress

定义进度条，指示进度。

用法

要应用此组件，请将 .uk-progress class 添加到 <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>

注意 翻译批注：此组件V3版本没有V2版本丰富，不知道为啥？

上一篇： Print

下一篇： Scroll

progress.md

# 进度条／Progress

<p class="uk-text-lead">定义进度条，指示进度。</p>

## Usage-用法

要应用此组件，请将 `.uk-progress` class 添加到 `<progress>` 元素。

```html
<progress class="uk-progress" value="" max=""></progress>
```

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

```
**注意** 翻译批注：此组件V3版本没有V2版本丰富，不知道为啥？