colorui-doc/docs/10.文档/20.基础元素/80.进度条.md

title, date, permalink, article

title	date	permalink	article
进度条	2023-05-28 16:16:38	/pages/basics/progress	false

父容器加上 class 类名 cu-progress，该容器内放一个元素加上背景 .bg-red|...，设置样式 width: '10%'，10% 就是该进度条的所占比例。

子容器内的文字会展示在比例中间，进度条展示的时候，作者已经封装好了动画样式，因此 width 属性，配合动态变量即可做到好看的动画效果

进度条形状

css 代码

.cu-progress  默认　
.cu-progress round  圆
.cu-progress radius  椭圆

演示代码

<view class="cu-progress">
    <view class="bg-red" :style="[{ width:loading?'92.8%':''}]">61.8%</view>
</view>
<view class="cu-progress radius margin-top">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
</view>
<view class="cu-progress round margin-top">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]">61.8%</view>
</view>

<script>
	export default {
		data() {
			return {
				loading: false,
			};
		},
		onLoad: function() {
			let that = this;
			setTimeout(function() {
				that.loading = true
			}, 500)
		},
		methods: {
		}
	}
</script>

进度条尺寸

css 代码

.cu-progress     默认  
.cu-progress sm  小    
.cu-progress xs  较小 

演示代码

<view class="cu-progress round">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>
<view class="cu-progress round margin-top sm">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>
<view class="cu-progress round margin-top xs">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>

// 以下js代码参照 进度条形状 演示代码js

进度条颜色

子容器加上 class 类名 bg-red|...

演示代码

<view class="cu-progress round">
    <view class="bg-red" :style="[{ width:loading?'61.8%':''}]"></view>
</view>

进度条条纹

父容器加上 class striped，进度条就会以条纹形式展示。

再加上 class 类名 active，进度条纹便以动画形式展示。

演示代码

<!-- 静态条纹 -->
<view class="cu-progress round striped">
    <view class="bg-green" :style="[{ width:loading?'60%':''}]"></view>
</view>
<!-- 动画条纹 -->
<view class="cu-progress round striped active">
    <view class="bg-black" :style="[{ width:loading?'40%':''}]"></view>
</view>

进度条比列

子容器，多个元素设置不同的宽度即可

演示代码

<view class="cu-progress radius striped active">
    <view class="bg-red" :style="[{ width:loading?'30%':''}]">30%</view>
    <view class="bg-olive" :style="[{ width:loading?'45%':''}]">45%</view>
    <view class="bg-cyan" :style="[{ width:loading?'25%':''}]">25%</view>
</view>

进度条布局

用flex布局，自定义右侧内容

演示代码

<view class="flex">
    <view class="cu-progress round">
        <view class="bg-green" :style="[{ width:loading?'100%':''}]"></view>
    </view>
    <text class="cuIcon-roundcheckfill text-green margin-left-sm"></text>
</view>
<view class="flex margin-top">
    <view class="cu-progress round">
        <view class="bg-green" :style="[{ width:loading?'80%':''}]"></view>
    </view>
    <text class="margin-left">80%</text>
</view>