苏州市建设工程招投标信息网_域名备案流程是什么_百度站长工具是什么意思_信息流广告代运营

需要在中实现一个定制化的环形进度条，最终效果如图：

使用代码

 <divclass="circular-progress":style="{'--progress': nextProgress,'--color': endSliderColor,'--size': isFull ? '60rpx' : '90rpx',}"><div class="inner-content"><img:class="isFull ? 'next_btn_full' : 'next_btn_normal'":src="`${assetsHost}dsplayer/next.png`"alt=""/></div></div>

 css代码：

/* 内层遮罩实现环形效果 */
.circular-progress::before {content: "";position: absolute;width: 80%;height: 80%;background: rgba(0, 0, 0, 1);border-radius: 50%;
}.inner-content {position: relative;z-index: 1;font-size: 1.2em;color: var(--color);
}/* 兼容方案（可选） */
@supports not (background: conic-gradient(#000, #fff)) {.circular-progress {background: var(--bg-color);}.circular-progress::after {content: "";position: absolute;width: 100%;height: 100%;border-radius: 50%;clip: rect(0, var(--size), var(--size), calc(var(--size) / 2));background: var(--color);transform: rotate(calc(var(--progress) * 3.6deg));}
}