---
title: 进度条
date: 2023-05-28 16:16:38
permalink: /pages/basics/progress
article: false
---
父容器加上 class `cu-progress`，该容器内放一个元素加上背景 `.bg-red|...`，设置样式 `width: '10%'`，10% 就是该进度条的所占比例。
子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 `width` 属性，配合动态变量即可做到好看的动画效果
## 进度条形状
> css 代码
```css
.cu-progress 默认
.cu-progress round 圆
.cu-progress radius 椭圆
```
> 演示代码
```vue
61.8%
61.8%
61.8%
```
## 进度条尺寸
> css 代码
```css
.cu-progress 默认
.cu-progress sm 小
.cu-progress xs 较小
```
> 演示代码
```vue
// 以下js代码参照 进度条形状 演示代码js
```
## 进度条颜色
子容器加上 class `bg-red|...`
> 演示代码
```vue
```
## 进度条条纹
父容器加上 class `striped`，进度条就会以条纹形式展示。
再加上 class `active`，进度条纹便以动画形式展示。
> 演示代码
```vue
```
## 进度条比列
子容器，多个元素设置不同的宽度即可
> 演示代码
```vue
30%
45%
25%
```
## 进度条布局
用flex布局，自定义右侧内容
> 演示代码
```vue
80%
```