Related Snippets

211 in Scroll Effects category
11–16 of 60
CSS Scroll Timeline Gauge Needle

CSS Scroll Timeline Gauge Needle

CSS View Timeline Card Flip In

CSS View Timeline Card Flip In

CSS Scroll Timeline Image Zoom Parallax

CSS Scroll Timeline Image Zoom Parallax

CSS Scroll Timeline Progress Ring

CSS Scroll Timeline Progress Ring

Scroll Stock Candlestick Crash

Scroll Stock Candlestick Crash

Scroll Satellite Ground Track Map

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

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.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the conic-gradient masking or the rotation math by hand. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the masked conic-gradient produces a colored arc without any SVG, and why transform-origin: bottom center is essential for the needle to pivot correctly. The same assistant is useful for extending the effect: ask it to add tick marks radiating from the hub, change the color zone boundaries to reflect different thresholds, or add a subtle needle-wobble easing so the motion feels slightly more mechanical rather than perfectly linear. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a speedometer-style gauge with a needle that sweeps across a colored dial purely from native CSS animation-timeline: scroll(root) — no JavaScript scroll listener, no requestAnimationFrame loop.

Requirements:
- A dial face built from a single conic-gradient with several distinct colored angle ranges (for example green, yellow, orange, red zones), with a radial mask applied to remove the center so only a ring-shaped arc remains — no SVG.
- A needle element (a narrow div) positioned with its base at the dial's pivot point and transform-origin set to that base, so rotating it with transform: rotate() pivots it exactly like a real gauge needle.
- A @keyframes animation rotating the needle from one extreme angle (for example -135deg, pointing down-left at the dial's minimum) to the opposite extreme (for example 135deg, pointing down-right at the dial's maximum, passing through 0deg/straight up at the midpoint), matching the arc's own angular sweep, bound to animation-timeline: scroll(root) so the needle's angle at any moment is a direct function of scroll position, not elapsed time.
- A numeric readout built by animating a pseudo-element's content property directly, with each of at least fifteen to twenty explicit keyframe stops setting a literal absolute string value (e.g. content: "110") rather than using counter-reset/counter-increment — a CSS counter's increment is a delta that only accumulates correctly under real sequential time-based playback, and silently fails to reach later values when driven by a scroll-scrubbed, directly-seekable timeline. Bind the same animation-timeline: scroll(root) the needle uses so the displayed number and the needle's angle can never drift out of sync with each other.
- A sticky-positioned stage that pins the gauge in the viewport while several full-height content sections scroll past beside it.
- Add an @supports not (animation-timeline: scroll()) fallback that fixes the needle at a reasonable static mid-dial angle and the readout at a matching static number, rather than leaving either stuck at the minimum in unsupported browsers.
- Keep any JavaScript limited to a one-time CSS.supports('animation-timeline: scroll()') feature check logged to the console — it must never drive or read scroll position itself.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

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>