uniapp中的progress进度条

官方示例：https://uniapp.dcloud.io/component/progress

效果图：

实现代码：

<template>
    <view>
		<progress :percent="pgList[0]" show-info stroke-width="3" />
		<br>
		<view style="display: flex;">
		    <progress :percent="pgList[1]" stroke-width="3" />
		    <uni-icons type="close" color="#dd524d"></uni-icons>
		</view>
		<br>
		<progress :percent="pgList[2]" stroke-width="3" />
		<br>
		<progress :percent="80" activeColor="#10AEFF" stroke-width="3" />
		<br>
		<button @click="setProgress">设置进度</button>
		<button type="warn" @click="clearProgress">清除进度</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'progress',
                pgList: [0, 0, 0]
            }
        },
        methods: {
            setProgress() {
                this.pgList = [20, 40, 60]
            },
            clearProgress() {
                this.pgList = [0, 0, 0]
            }
        }
    }
</script>