Member Avatar for SilentCoder

Hi, i would like to know how can i make a guage meter, that looks something like this:

I know how to rotate the arrow, but how can i make the guage so that the red color increases with the arrow.

Thanks.

  • 4 Contributors
  • 6 Replies
  • 785 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by SilentCoder

Dani AI

Generated

, was right to point you toward CSS3, but the practical choices are: CSS (modern), SVG (recommended), or Canvas. The key problem you described — a rotating needle plus a red arc that grows with the needle — is easiest to solve cleanly with SVG because you can draw a single arc and control its visible length precisely; CSS conic-gradient is a good CSS-only alternative if you only need modern-browser support.

Practical approach (SVG — recommended):

  • Draw two identical arc strokes: a background arc (gray) and a foreground arc (red). Use the arc path so its visible length equals the gauge sweep.
  • Compute the arc length and set the foreground stroke-dasharray to that length. Then set stroke-dashoffset = arcLength * (1 - value/max) to reveal the red portion in proportion to your value.
  • Rotate the needle by computing deg = startAngle + (value / max) * sweepAngle and applying a transform with transform-origin at the gauge center. Animate with CSS transitions or requestAnimationFrame for smoother updates.

CSS-only option (modern browsers):

  • Use background: conic-gradient(...) on a masked element to show a partial circle. Drive the gradient stop with a CSS variable that you update from JS to match the needle percentage.
  • Rotate an absolutely positioned needle with the same deg formula above.

Troubleshooting & tips:

  • Ensure transform-origin is exactly at the needle pivot.
  • For SVG, vector-effect: non-scaling-stroke keeps stroke width stable on resize; use stroke-linecap: round for a soft arc end.
  • Provide accessibility: add role="progressbar" and aria-valuemin/max/now, plus a text alternative.
  • If you must support old IE, fall back to Canvas or pre-rendered images.

This gives you precise control over the red arc and a smooth needle that always matches the visual state.

Recommended Answers

All 6 Replies

Member Avatar for SilentCoder

Yes, thats what i meant.

Member Avatar for Member #949455

Is it solved? Can you click Mark Question Solve on the bottom left corner so the thread is close and solve so noone can add stuff to it. Thanks.

Member Avatar for <M/>

I know there are many online tutorials that you can search for on google... i think i found one on one of the envato sites and another site that I forgot...

Member Avatar for JorgeM

Is it solved? Can you click Mark Question Solve on the bottom left corner so the thread is close and solve so noone can add stuff to it.

How can this be solved? While the link you posted does have some amazing examples, there was no solution proposed in this thread. In any event, marking a thread as being solved, does not prevent anyone else from posting in the thread.

Member Avatar for SilentCoder

Unfortunately no, even though i can get the meter turning, can't seem to find a way to colorize the red portion using css3.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.