uniapp如何使用纯css来实现进度条效果？

示例代码如下：

<template>

	<view class="flex align-center diygw-col-24 justify-center">

		<view class="progress-circle " :class="'progress-'+innerPercent" :style="{

'--not-progress-color':notProgressColor,

'--bg-color':bgColor,

'--color':color,

'--progress-color':progressColor,

'--width':width+'px',

'--font-size':fontSize+'px',

'--border-width':borderWidth+'px'

}">

			<view class="inner">

				<view class="progress-number">{{innerPercent}}%</view>

			</view>

		</view>

	</view>

</template>

<script>
	export default {

		props: {

			width: {

				type: Number,

				default: 100

			},

			borderWidth: {

				type: Number,

				default: 20

			},

			bgColor: {

				type: String,

				default: '#fff'

			},

			notProgressColor: {

				type: String,

				default: '#ddd'

			},

			progressColor: {

				type: String,

				default: '#07c160'

			},

			color: {

				type: String,

				default: '#07c160'

			},

			fontSize: {

				type: Number,

				default: 24

			},

			/**

			* 进度(0-100)

			*/

			percent: {

				type: Number,

				default: 30

			},

			/**

			* 是否动画

			*/

			animate: {

				type: Boolean,

				default: true

			},

			/**

			* 动画速率

			*/

			rate: {

				type: Number,

				default: 5

			}

		},

		computed: {

			/**

			* @private

			*/

			complete() {

				return this.innerPercent == 100

			}

		},

		watch: {

			percent(perce...

点击查看剩余70%