进度条/Progress
最后更新于:2022-04-01 22:23:17
# 进度条/Progress
为进度条定义不同样式。
## 用法
进度条由背景和进度条本身组成,用来体现增长。注意 使用此组件需要额外添加 `progress.css` 文件,在`css/components`文件夹中。
| Class | 描述 |
| --- | --- |
| `.uk-progress` | 该类用在父元素来创建进度条的背景。 |
| `.uk-progress-bar` | 该类需要被添加至子元素用于创建实际的进度条。 |
### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3c5de7a.jpg)
### Markup
```
```
* * *
## 尺寸调整
添加 `.uk-progress-mini` 或 `.uk-progress-small` 类用于改变进度条的尺寸。
#### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3c6d66e.jpg)
### Markup
```
';
...
...
```
* * *
## 颜色调整
要在您的进度条中应用不同的颜色,仅需添加 `.uk-progress-success`,`.uk-progress-warning` 或 `.uk-progress-danger`类。
#### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3c7ee95.jpg)
### Markup
```
...
...
...
```
* * *
### 条纹
使用 `.striped` 类,创建一个带条纹的进度条。
#### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3c982ab.jpg)
### Markup
```
...
```
甚至可以使条纹动起来。为此,仅需添加 `.uk-active` 类。
#### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3ca9198.jpg)
### Markup
```
...
```
* * *
### 组合
进度条组件的所有调整类可以互相组合使用。
#### Example
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-05-12_57346f3cbc1a0.jpg)
### Markup
```
...
```