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

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

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。

RSS

上一篇:

下一篇:

发表评论

电子邮件地址不会被公开。 必填项已用*标注