只需使用conic-gradient() 并将百分比值设置为自定义属性0%到100%。
<div class="chart"></div>
@property --percentage {
initial-value: 0%;
inherits: false;
syntax: "<percentage>";
}
.chart {
background: conic-gradient(red var(--percentage), white 0);
border-radius: 50%;
width: 80vmin;
height: 80vmin;
animation: timer 4s infinite linear;
}
@keyframes timer {
to {
--percentage: 100%;
}
}
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
box-sizing: border-box;
padding: 2rem;
}
还有兼容性更好的https://css-tricks.com/css-pie-timer-re-revisited/