Some gauges present a color indicator, usually from green to red, associated with the position of the arrow; we can work out a similar result. First of all we need to define two new custom data attributes, one that indicates the percentage at which the indicator switches from green to orange and the other where the percentage switches from orange to red. Here it is:
<div data-gauge data-min="0" data-max="100" data-percent="50" data-orange-from="60" data-red-from="90">
<div data-arrow></div>
</div>
Then we need to specify a default background color, let's say green
, within div[data-gauge]
:
background-color: green;
Next, we redefine the background gradient to leave the first 25 percent of the circumference transparent; in this way we can display (and control) the underlying color, so let's rewrite the gauge-background
call:
@include gauge-background(11,
radial-gradient(50% 100%, circle, rgba(255,255,255,0), rgba(255,255,255,0) 25%, rgb(255,255,255...