div[role="progressbar"] {
--size: 12rem;
--fg: #369;
--bg: #def;
--pgPercentage: var(--value);
animation: growProgressBar 3s 1 forwards;
width: var(--size);
height: var(--size);
border-radius: 50%;
display: grid;
place-items: center;
background:
radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
;
font-family: Helvetica, Arial, sans-serif;
font-size: calc(var(--size) / 5);
color: var(--fg);
}
Hi,
Thanks for a nice work. I actually added an event listener to start animation only when the element is scrolled in sight.
How would I need to go about if I wanted to have two concentric circles (i.e. on top of each other) with different deg-values and animated simultaneously?
Hello , Can you guide me that how can i increase the size of blue bar?
Hello –
Would you know what changes to your code would be needed to make the circular progress bar adapt to the percentage. i.e. to make the circular bar follow the percent number (for example if 45% is inserted in the html instead of 75% or any other percentage) Thank you
Very helpful article! I used it together with spliderjs