<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.