← All elements
<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. 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.