纯css实现环形进度条+动画加载效果-HTML部分

<view :class="styles.chargeBox">
                <view :class="styles.clockFace">
                    <!-- 24 个刻度线 -->
                    <view
                        v-for="i in 24"
                        :key="i"
                        :class="[styles.tick]"
                        :style="{ transform: `rotate(${(i - 1) * 15}deg) translateY(-248rpx)` }">
                        <!-- 特殊刻度数字 -->
                        <text
                            v-if="isSpecialTick(i)"
                            :class="styles.tickNumber"
                            :style="{ transform: `rotate(${-((i - 1) * 15)}deg)` }"
                        >
                            {{ getTickNumber(i) }}
                        </text>
                    </view>
                    <!-- 环形轨道 -->
                    <view :class="targetProgress == 100 ? styles.orbitFinsh : styles.orbitTrack"  :style="{ '--progress': `${currentProgress}` }">
                        <template  v-if="targetProgress > 0 && targetProgress < 100">
                            <!-- 进度条圆角 -->
                            <view :class="styles.orbitEnd"></view>
                            <!-- 半径上的小圆点 -->
                            <view :class="styles.orbitCircle"></view>
                        </template>
                        <!-- 外层渐变圆环 -->
                        <view :class="styles.outerCircle">
                            <view :class="styles.circularTrack">
                                <!-- 最小内层圆环 -->
                                <view :class="styles.innerCircle">
                                    <view :class="styles.measure">
                                        <view :class="styles.num">{{ currentProgress }}<view :class="styles.unit">%</view></view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>