Archives for : 六月2024

第1259天：圆形进度条用 conic-gradient 只要几行代码

2024年6月12日 星期三 小雨转晴 22～31℃

标签:

今天折腾这玩意，从复杂到简单，最后发现只要这几行就能解决，效果还十分优雅。

css

.progress-circle {
width: 100px;
height: 100px;
border-radius: 50%;
}

html

const progressStyle = `background: conic-gradient(#fff ${progress}%, rgba(0, 0, 0, 0.3) 0%)`

<View className=”progress-circle” style={progressStyle} />

${progress} 是变量，0 到 100。