antd-mobile
Version:
<div align="center">
52 lines (51 loc) • 1.49 kB
CSS
/*进度圈*/
.adm-progress-circle {
--track-width: var(--adm-progress-circle-track-width, 3px);
--size: var(--adm-progress-circle-size, 50px);
--track-color: var(--adm-progress-circle-track-color, var(--adm-color-border));
--fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary));
--percent: 0;
--pi: 3.14159265;
--radius: calc(var(--size) / 2 - var(--track-width) / 2);
--circumference: calc(var(--radius) * var(--pi) * 2);
display: inline-block;
width: var(--size);
height: var(--size);
}
.adm-progress-circle-svg {
width: 100%;
height: 100%;
}
.adm-progress-circle-svg > .adm-progress-circle-track,
.adm-progress-circle-svg .adm-progress-circle-fill {
stroke-width: var(--track-width);
r: var(--radius);
cx: calc(var(--size) / 2);
cy: calc(var(--size) / 2);
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.adm-progress-circle-svg > .adm-progress-circle-track {
stroke: var(--track-color);
}
.adm-progress-circle-svg > .adm-progress-circle-fill {
transition: stroke-dashoffset 0.35s;
stroke: var(--fill-color);
stroke-dasharray: var(--circumference);
stroke-dashoffset: calc(var(--circumference) * (1 - var(--percent) / 100));
stroke-linecap: round;
}
.adm-progress-circle-content {
position: relative;
margin: auto;
width: 100%;
height: 100%;
}
.adm-progress-circle-info {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
text-align: center;
transform: translate(-50%, -50%);
}