I’d like to create a progress indicator with a gradient fill in HTML/CSS, similar to the one shown below, but with a number displayed in the center:
I successfully created a monochrome half-circle using this tutorial and a full circle with a gradient using this post. Below, you can find the code for both examples.
My goal is to combine these approaches. The post I linked earlier demonstrates how to set different border thicknesses, but I haven’t been able to adapt it to suit my needs. I suspect it may only work with fixed values like 25%/50%/75%, whereas I need to use completely dynamic values. Additionally, I want the chart’s background to be transparent.
Is it possible to achieve this entirely with CSS, or should I consider using SVG or another approach?
body {
background: linear-gradient(90deg, #c084fc22 0%, #fb923c22 100%);
display: flex;
gap: 10px;
}
.progress {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 30px;
}
.progress--half {
border-radius: 50%;
border: solid 10px #fb923c;
mask: linear-gradient(#000, #000) padding-box, conic-gradient(#000 50%, #ffffff22 0%) border-box;
}
.progress--gradient {
position: relative
}
.progress--gradient::before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
padding: 10px;
border-radius: 50%;
background: conic-gradient(#fb923c, #c084fc, #818cf8, #c084fc, #fb923c);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
}
.progress--half-gradient {
/* ? */
}<div class="progress progress--half">50%</div>
<div class="progress progress--gradient">50%</div>2