css3 进度圆盘,CSS3圆形进度

最新推荐文章于 2021-09-03 10:27:55 发布

weixin_40000131

最新推荐文章于 2021-09-03 10:27:55 发布

阅读量179

点赞数

文章标签： css3 进度圆盘

本文介绍了一种使用纯CSS创建径向进度条的方法。通过调整背景渐变的角度来实现不同进度状态的显示效果，适用于网页应用中表示完成进度或状态指示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

* {

box-sizing: border-box;

}

body {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-flow: row wrap;

flex-flow: row wrap;

}

.radialProgressBar {

border-radius: 50%;

-webkit-transform: translate(50%, 50%);

transform: translate(50%, 50%);

width: 100px;

height: 100px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

background: #ddd;

margin: 20px;

}

.radialProgressBar .overlay {

border-radius: 50%;

width: 80px;

height: 80px;

margin: auto;

background: #fff;

text-align: center;

padding-top: 30%;

}

.progress-0 {

background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);

}

.progress-10 {

background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);

}

.progress-20 {

background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);

}

.progress-30 {

background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);

}

.progress-40 {

background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);

}

.progress-50 {

background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #028cd5 50%, #ddd 50%);

}

.progress-60 {

background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(36deg, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(54deg, #028cd5 50%, #ddd 50%);

}

.progress-70 {

background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%);

}

.progress-80 {

background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, #ddd 50%);

}

.progress-90 {

background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, #ddd 50%);

}

.progress-100 {

background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, #ddd 50%);

background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, #ddd 50%);

}