css,环形

思路：
1.先利用conic-gradient属性画一个圆，然后再叠加
效果图

<template><div class="ring"><div class="content"><slot></slot></div></div>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
export default defineComponent({props: {width: {type: Number,default: 200,},height: {type: Number,default: 200,},color: {type: String,default: "#fcb844",},angle: {type: Number,default: 360,},total: {type: Number,default: 360,},unit: {type: String,default: "px",},interval: {type: Number,default: 20,},autoPlay: {type: Boolean,default: true,},},setup(props, { emit }) {const datas = reactive({timer: null,sportAge: 0,});// 设置渐变const bgImage = computed(() => {datas.sportAge = props.autoPlay ? datas.sportAge : currentAngle.value;return `conic-gradient(${props.color} 0deg, ${props.color} ${datas.sportAge}deg, transparent 0deg)`;});// 当前度数(deg)const currentAngle = computed(() => {return ((360 / props.total) * props.angle).toFixed(2);});// 单位前缀const unitSuffix = computed(() => {return (data, interval = 0) => {return data - interval + props.unit;};});//动画const animationPlay = () => {datas.timer = setInterval(() => {if (currentAngle.value <= datas.sportAge) {clearInterval(datas.timer);datas.timer = null;return;}datas.sportAge++;}, 10);};onMounted(() => {props.autoPlay ? animationPlay() : "";});return {...toRefs(datas),bgImage,unitSuffix,};},
});
</script>
<style lang="less" scoped>
.ring {position: relative;width: v-bind(unitSuffix(width));height: v-bind(unitSuffix(height));display: flex;align-items: center;justify-content: center;&::before {content: "";position: absolute;left: 0;top: 0;width: v-bind(unitSuffix(width));height: v-bind(unitSuffix(height));// background-color: red; /* 对于不支持渐变的浏览器 */background-image: v-bind(bgImage);border-radius: 50%;transform: scale(-1, 1);}&::after {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: v-bind(unitSuffix(width, interval));height: v-bind(unitSuffix(height, interval));border-radius: 50%;background-color: #ffffff;}.content {position: absolute;z-index: 3;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
}
</style>

<template><div class="ring_box"><div class="inner"><ring:width="180":height="180":color="innerColor":z-index="2":interval="interval"></ring><div class="out"><ring :total="3454" :angle="2234" :interval="interval" :z-index="4"><ring:width="175":height="175":color="innerColor":interval="interval / 2":z-index="4"><div>内容</div></ring></ring></div></div></div>
</template>
<script lang="ts">
import ring from "./ring.vue";
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({components: {ring,},setup(props) {const datas = reactive({width: 180,height: 180,outColor: "",innerColor: "#feedd1",interval: 40,});return {...toRefs(datas),};},
});
</script>
<style lang="less" scoped>
.ring_box {width: 300px;height: 300px;display: flex;align-items: center;justify-items: center;position: relative;.out,.inner {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
}
</style>