<div class="progress-circle">
<span class="number" data-value="100"></span>
<svg height="150" width="150" class="circle">
<circle cx="75" cy="75" r="65" stroke="var(--yellow)" stroke-width="20" fill="none" />
</svg>
</div>
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@800&display=swap");
:root {
--night: #0d0029;
--lavender: #daa4f6;
--yellow: #f9dc5c;
--red: #e84855;
--mint: #55deae;
}
body {
font-family: "JetBrains Mono", monospace;
font-size: 32px;
font-weight: 800;
height: 100vh;
padding: 0;
display: flex;
flex-direction: column;
gap: 2%;
justify-content: center;
align-items: center;
color: var(--yellow);
background-color: var(--night);
transition: all 0.3s ease-in-out;
}
.progress-circle{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
outline: 1px solid var(--yellow);
outline-offset: -1px;
}
.progress-circle::after,
.number{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.progress-circle::after{
content:'';
width: 110px;
height: 110px;
border-radius: inherit;
outline: inherit;
}
.circle{
stroke-dasharray: 410;
stroke-dashoffset: 410;
transform: rotate(-90deg);
animation: bar-fill 8s linear forwards;
animation-iteration-count: infinite;
}
@keyframes bar-fill {
100% {
stroke-dashoffset: 0;
}
}
for (let i = 0; i < 500; i++) {
const el = document.querySelector(".number");
const elValue = Number(el.getAttribute("data-value"));
let counter = 0;
setInterval(() => {
if (counter !== elValue) {
counter++;
el.innerHTML = `${counter}%`;
}
if (counter == 100) {
counter = 0;
el.setAttribute("data-value", 0);
}
}, 80);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.