webdevpuneet.com

Related Snippets

204 in Scroll Effects category
13–18 of 60

CSS Scroll Timeline Gauge Needle

CSS View Timeline Card Flip In

CSS Scroll Timeline Image Zoom Parallax

CSS Scroll Timeline Progress Ring

Scroll Stock Candlestick Crash

Scroll Satellite Ground Track Map

CSS Scroll Timeline Gauge Needle — Native animation-timeline: scroll()

CSS Scroll Timeline Gauge Needle · Scroll · Plain HTML, CSS & JS · Live preview

CategoryScroll Effects
TagsScroll AnimationCSS AnimationData Visualization

Copy & paste

Source Code

<div class="gng-page">
  <aside class="gng-stage">
    <p class="gng-hint">Scroll ↓ — the needle climbs</p>
    <div class="gng-gauge">
      <div class="gng-arc"></div>
      <div class="gng-needle"></div>
      <div class="gng-hub"></div>
      <div class="gng-reading"><span class="gng-num"></span><span class="gng-unit">km/h</span></div>
      <span class="gng-lo">0</span><span class="gng-hi">220</span>
    </div>
  </aside>
  <main class="gng-sections">
    <section class="gng-block"><span class="gng-tag">Idle</span><h2>A Needle Bound to Scroll, Not Time</h2><p>This speedometer needle does not animate on a timer — its rotation is a direct, deterministic function of how far you've scrolled, via <code>animation-timeline: scroll(root)</code>.</p></section>
    <section class="gng-block"><span class="gng-tag">Accelerating</span><h2>Keep Going</h2><p>The needle sweeps across the dial exactly in step with your scroll position — pause scrolling and it stops dead, instantly.</p></section>
    <section class="gng-block"><span class="gng-tag">Redline</span><h2>Top of the Dial</h2><p>By the bottom of the page the needle has swept to its maximum reading — scroll back up and watch it fall in perfect reverse.</p></section>
  </main>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Needle rotation driven entirely by animation-timeline: scroll(root), no JS scroll handling
Four-zone colored dial arc built from a single masked conic-gradient, no SVG
Numeric readout steps through literal content values per keyframe — not counter-increment, which cannot accumulate correctly on a scroll-scrubbed timeline
Needle and readout share one scroll timeline, so they can never drift out of sync
transform-origin: bottom center pivots the needle exactly like a real gauge mount
Sticky positioned stage keeps the gauge pinned while content scrolls past beside it
Zero JavaScript scroll listeners or requestAnimationFrame loops
@supports fallback locks to a static mid-dial reading instead of a stuck-at-zero state

About this UI Snippet

CSS Scroll Timeline Gauge Needle — A Conic-Gradient Dial Driven by scroll(root)

Screenshot of the CSS Scroll Timeline Gauge Needle snippet rendered live

A gauge needle that sweeps as you scroll is a distinctive way to show progress that reads as physical and analog rather than as a flat bar. This snippet builds the whole dial — arc, needle, and numeric readout — from a masked conic-gradient, a single rotating div, and native animation-timeline: scroll(root), with no JavaScript touching the needle's angle.

The arc is a masked conic-gradient, not an SVG path

.gng-arc paints four colored zones (green, yellow, orange, red) across a 270deg sweep with a single conic-gradient — starting at from 225deg so the gradient's own 0deg lands on the lower-left "0" mark, running clockwise through the left side, the top, and the right side, and leaving the remaining 90deg at the bottom transparent for the classic speedometer gap. A radial mask then punches out the center so only a ring remains — a real gauge shape built with zero SVG markup and zero draw calls, just two stacked CSS gradients.

A rotating div is the needle

The needle itself is a plain, narrow div pivoted at the ring's center via bottom: 50% plus transform-origin: bottom center, so rotating it with transform: rotate() pivots it exactly around that center point like a real gauge needle mounted on a hub. @keyframes gng-sweep rotates it from -135deg (pointing down-left, the "0" reading) to 135deg (pointing down-right, the "220" reading), passing through 0deg — straight up — at the midpoint reading, exactly matching the arc's own 270deg sweep. Binding that animation to animation-timeline: scroll(root) means the needle's angle at any moment is a direct, deterministic function of scroll position — not of elapsed time.

A stepped numeric readout, matching the needle — and why counter-increment doesn't work here

The digits below the needle animate via content, not a CSS counter: twenty-one keyframe stops each set an absolute literal value ("0", "11", "22" ... "220"), wrapped in steps(20), bound to the identical scroll(root) timeline the needle uses. The obvious-looking alternative — counter-reset plus a counter-increment: 11 at every keyframe — looks correct but silently breaks on a scroll-driven timeline: counter-increment is a *delta* from whatever the running total already was, which only accumulates correctly when an animation actually plays through each keyframe in sequence over real time. A scroll-linked timeline instead jumps straight to whichever keyframe matches the current scroll position without "passing through" the others, so only that one keyframe's +11 ever applies — the readout would freeze at 11 no matter how far you scrolled. Writing the absolute value directly into content at each step sidesteps the problem entirely, since there's no running total to lose track of.

Why rotate() and not clip-path for the dial fill

Unlike the progress ring's stroke-dashoffset unwind, a needle is a single pointer rather than a filling arc, so a rotating transform is the natural primitive — no dash array or path length calculation is needed at all.

Browser support

Chromium-based browsers (Chrome, Edge, Opera, Brave) support animation-timeline: scroll() today; Firefox and Safari support is still landing. The @supports not (animation-timeline: scroll()) fallback fixes the needle at a static mid-dial angle and the readout at a matching static number, rather than leaving either pinned at zero.

Customizing it

Change the conic-gradient zone angles to reflect different thresholds, adjust the rotate(-135deg) to rotate(135deg) sweep range (and the arc's matching from angle and transparent gap) for a narrower or wider dial, or relabel the unit and max value for a different metric entirely (battery percentage, temperature, load). Pair it with CSS Scroll Timeline Progress Ring for a related scroll-bound readout using a different visual metaphor.

Step by step

How to Use

  1. 1
    Paste the HTML, CSS, and JSA sticky gauge and numeric readout render beside three full-height content blocks.
  2. 2
    Scroll from top to bottomWatch the needle sweep across the dial and the readout climb in sync, purely via animation-timeline: scroll(root).
  3. 3
    Scroll back upThe needle and readout rewind exactly, since they read a live scroll timeline, not a one-shot trigger.
  4. 4
    Change the dial rangeAdjust the rotate(-135deg) to rotate(135deg) sweep in @keyframes gng-sweep (and the arc’s matching conic-gradient angles) for a different angular range.
  5. 5
    Relabel the metricSwap gng-unit’s text and the readout’s keyframe values for a different gauge (battery, temperature, load).
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

📊
Analytics and performance dashboards
Show scroll progress as an analog speedometer instead of a flat bar, with the needle swept by animation-timeline: scroll(root) and no JavaScript.
⚡
Product capability pages
Visualise a headline metric such as speed or throughput, with the numeric readout stepping through literal values at each keyframe.
🎓
Conic-gradient dial construction
Learn how a four-zone coloured arc is built from one masked conic-gradient with no SVG required.
🚗
Automotive and hardware marketing
Give a speedometer-style progress indicator to a product page, with needle and readout sharing one scroll timeline so they can never drift apart.
🧹
Replacing a JavaScript gauge library
Remove a charting dependency for a simple dial, since the whole animation is expressed in native CSS.
Related: CSS Scroll Timeline Progress Ring
See CSS Scroll Timeline Progress Ring for a related scroll-bound readout using a ring instead of a needle.
Related: CSS Scroll Timeline Image Zoom Parallax
See CSS Scroll Timeline Image Zoom Parallax for another native scroll(root) technique.

Got questions?

Frequently Asked Questions

A single conic-gradient paints four colored zones around a full circle, then a radial mask (mask: radial-gradient(circle, transparent 62%, #000 63%, #000 100%)) removes the center, leaving only a colored ring visible — no SVG path or stroke is involved.

The needle div is positioned so its bottom edge sits at the gauge’s pivot hub. Setting transform-origin: bottom center makes rotate() pivot the needle exactly around that base point, the same way a real gauge needle rotates around its mounting pin rather than around its own visual center.

No — both are bound to the identical animation-timeline: scroll(root), so any given scroll position always produces the same needle angle and the same counter value; there is no separate JavaScript computation that could drift from the CSS-driven rotation.

The dial’s maximum reading is 220 and the readout uses twenty 5%-wide keyframe steps to reach it, so 220 divided by 20 steps is 11 per step — chosen to land exactly on the stated maximum rather than leaving a rounding gap at the top of the dial.

A CSS counter animated via counter-increment only accumulates correctly when an animation plays through its keyframes in sequence over real time — each step adds its delta to whatever the running total already was. A scroll-linked timeline instead jumps directly to whichever keyframe matches the current scroll position without passing through the others, so only that one keyframe’s increment would ever apply, and the number would freeze after the first step no matter how far you scrolled. Writing the absolute value straight into content at each step has no running total to lose, so it stays correct at any scroll position.

The @supports not (animation-timeline: scroll()) block fixes the needle at a static mid-dial angle and the readout at a matching static number, so Firefox and Safari users see an intentional, complete-looking gauge rather than one stuck pointing at zero.