<div class="pc-gauge" role="img" aria-label="72 percent of sales target">
<div class="pc-gauge__arc"></div>
<div class="pc-gauge__needle"></div>
<span class="pc-gauge__hub"></span>
<b>72% of target</b>
</div>About this animation
A half-circle gauge with red, amber and green zones from one conic gradient and a needle that sweeps to its value on load.
How it works
A conic-gradient starting at the bottom centre paints red, amber and green zones across half a circle, and a radial-gradient mask punches out the middle to leave an arc. The needle is a thin bar rotated around its bottom edge, and a keyframe sweeps it from the far left to its final angle when the page loads.
Ways to customise it
- Change the rotate(40deg) on the needle to set the value.
- Edit the three zone colours and their degree stops.
- Change the 1.8s duration or the cubic-bezier for a different overshoot.
Good to know
The gauge is an image to a screen reader, so the aria-label states the value in words and should be updated whenever the needle changes. The needle angle is fixed in CSS, so connect it to your data in your template.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.