进度条
定义进度条的不同样式。
用法
进度条由背景条和表示进度增加的进度条本身组成。
| 类 | 描述 |
|---|---|
.uk-progress |
此类用于父容器上，以创建进度条的背景。 |
.uk-progress-bar |
此类别需要添加到子元素以创建实际的进度条。 |
示例
标记
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>尺寸修饰符
添加 .uk-progress-mini 或 .uk-progress-small 类来更改条的大小。
示例
标记
<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 类即可。
示例
标记
<div class="uk-progress uk-progress-success">...</div>
<div class="uk-progress uk-progress-warning">...</div>
<div class="uk-progress uk-progress-danger">...</div>条纹
要创建条纹进度条，请使用 .uk-progress-striped 类。
示例
标记
<div class="uk-progress uk-progress-striped">...</div>你甚至可以为条纹条添加动画。为此，只需添加 .uk-active 类。
示例
标记
<div class="uk-progress uk-progress-striped uk-active">...</div>可组合
进度条组件的所有修饰符都可以相互组合。
示例
标记
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>