🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 进度条/Progress 为进度条定义不同样式。 ## 用法 进度条由背景和进度条本身组成,用来体现增长。注意 使用此组件需要额外添加 `progress.css` 文件,在`css/components`文件夹中。 | Class | 描述 | | --- | --- | | `.uk-progress` | 该类用在父元素来创建进度条的背景。 | | `.uk-progress-bar` | 该类需要被添加至子元素用于创建实际的进度条。 | ### Example ![](https://box.kancloud.cn/2016-05-12_57346f3c5de7a.jpg) ### Markup ``` <div class="uk-progress"> <div class="uk-progress-bar" style="width: 40%;">40%</div> </div> ``` * * * ## 尺寸调整 添加 `.uk-progress-mini` 或 `.uk-progress-small` 类用于改变进度条的尺寸。 #### Example ![](https://box.kancloud.cn/2016-05-12_57346f3c6d66e.jpg) ### Markup ``` <div class="uk-progress uk-progress-mini">...</div> <div class="uk-progress uk-progress-small">...</div> ``` * * * ## 颜色调整 要在您的进度条中应用不同的颜色,仅需添加 `.uk-progress-success`,`.uk-progress-warning` 或 `.uk-progress-danger`类。 #### Example ![](https://box.kancloud.cn/2016-05-12_57346f3c7ee95.jpg) ### Markup ``` <div class="uk-progress uk-progress-success">...</div> <div class="uk-progress uk-progress-warning">...</div> <div class="uk-progress uk-progress-danger">...</div> ``` * * * ### 条纹 使用 `.striped` 类,创建一个带条纹的进度条。 #### Example ![](https://box.kancloud.cn/2016-05-12_57346f3c982ab.jpg) ### Markup ``` <div class="uk-progress uk-progress-striped">...</div> ``` 甚至可以使条纹动起来。为此,仅需添加 `.uk-active` 类。 #### Example ![](https://box.kancloud.cn/2016-05-12_57346f3ca9198.jpg) ### Markup ``` <div class="uk-progress uk-progress-striped uk-active">...</div> ``` * * * ### 组合 进度条组件的所有调整类可以互相组合使用。 #### Example ![](https://box.kancloud.cn/2016-05-12_57346f3cbc1a0.jpg) ### Markup ``` <div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div> ```