uniProject/uni_modules/c-progress-circle/components/c-progress-circle/c-progress-circle.vue

<template>
	<view class='container' :style="{width:size,height:size}">
		<view class="left">
			<view class="leftcircle" :style="leftcircleStyle">
			</view>
		</view>
		<view class="right">
			<view class="rightcircle" :style="rightcircleStyle"></view>
		</view>
		<view class="cneter-box">
			<slot>
				{{progress*100}}%
			</slot>
		</view>
	</view>
</template>
<script>
	/**
	 * c-lockScreen 环形进度条
	 * @property {Number} progress 进度 0-1 默认0
	 * @property {String} color 进度条颜色 默认#3ec3c1
	 * @property {String} size 进度条尺寸 单位rpx 默认200rpx
	 * @property {String} boderWidth 边框宽度 单位rpx 默认200rpx
	 * */
	 export default {
	 	props:{
			progress: {
				type: Number,
				default: 0
			},
			color: {
				type: String,
				default: '#3ec3c1'
			},
			size: {
				type: String,
				default: "200rpx"
			},
			boderWidth:{
				type: String,
				default: "200rpx"
			}
		},
		computed:{
			leftcircleStyle(){
				return `border-width: calc(${this.boderWidth} * 0.1);
				border-bottom-color:${this.color};
				border-left-color:${this.color};
				transform: rotate(${this.leftAngle});
				`
			},
			rightcircleStyle(){
				return `border-width: calc(${this.boderWidth} * 0.1);
				border-top-color:${this.color};
				border-right-color:${this.color};
				transform: rotate(${this.rightAngle});`
			},
			rightAngle(){
				if (this.progress >= 0.5) {
					return 45+'deg'
				} else {
					return -135 + 180 * this.progress * 2+'deg'
				}
			},
			leftAngle(){
				if (this.progress < 0.5) {
					return -135+'deg'
				} else {
					return -315 + 180 * this.progress * 2+'deg'
				}
			}
		}
	 }
</script>
<style lang="scss" scoped>
	view{
		box-sizing: border-box;
	}
	.container {
		display: flex;
		position: relative;
		// width: v-bind(size);
		// height: v-bind(size);
		.left {
			width: 50%;
			height: 100%;
			position: relative;
			overflow: hidden;
			top: 0;
			left: 0;

			.leftcircle {
				width: 200%;
				height: 100%;
				border-color:white;
				border-style: solid;
				position: absolute;
				border-radius: 50%;
				left: 0px;
				top: 0px;
				transition: transform 0.2s;
				//vue3
				// border-width: calc(v-bind(size) * 0.1);
				// border-bottom-color:v-bind(color);
				// border-left-color:v-bind(color);
				// transform: rotate(v-bind(leftAngle));

				// animation-name: circle_left;
				// animation-duration: 2s;
				// animation-timing-function: linear;
				// animation-iteration-count: infinite;

			}

		}

		.right {
			width: 50%;
			height: 100%;
			position: relative;
			overflow: hidden;
			top: 0;
			right: 0;
		}

		.rightcircle {
			width: 200%;
			height: 100%;
			border-radius: 50%;
			border-color:white;
			border-style: solid;
			position: absolute;
			
			right: 0px;
			top: 0px;
			// animation-name: circle_right;
			// animation-duration: 2s;
			// animation-timing-function: linear;
			// animation-iteration-count: infinite;
			transition: transform 0.2s;
			//vue3
			// border-width: calc(v-bind(size) * 0.1);
			// border-top-color:v-bind(color);
			// border-right-color:v-bind(color);
			// transform: rotate(v-bind(rightAngle));
		}
		.cneter-box{
			position: absolute;
			width: 100%;
			height: 100%;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}






	// @keyframes circle_right {
	// 	0% {
	// 		transform: rotate(-135deg);
	// 	}

	// 	50%,
	// 	100% {
	// 		transform: rotate(45deg);
	// 	}
	// }

	// @keyframes circle_left {

	// 	0%,
	// 	50% {
	// 		transform: rotate(-135deg);
	// 	}

	// 	100% {
	// 		transform: rotate(45deg);
	// 	}
	// }
</style>