Tailwind UI Pattern Registry for humans and agents

scroll progress ring scroll-to-top svg reading indicator scroll-to-top button with progress reading progress indicator page scroll position feedback scroll-to-top buttons lack visual feedback need reading progress indicator without a bar want circular progress tied to scroll position

Scroll Progress Ring

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/scroll-progress-ring.json
Format
Preview
Stage Background
Customize

Quick Start

<button class="scroll-progress-ring is-visible">...</button>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1015 bytes · 52 lines
Custom Properties
--ring-size--ring-stroke--ring-color--ring-bg
Classes
.scroll-progress-ring
scroll progress ring scroll-to-top svg reading indicator

A fixed scroll-to-top button surrounded by an SVG ring that fills based on scroll position. The ring uses stroke-dashoffset animated via JS. Add .is-visible class after 200px of scroll.

Basic usage

<button class="scroll-progress-ring" aria-label="Scroll to top" onclick="window.scrollTo({top:0,behavior:'smooth'})">
  <svg viewBox="0 0 44 44">
    <circle class="ring-bg" cx="22" cy="22" r="20"/>
    <circle class="ring-progress" cx="22" cy="22" r="20"
            stroke-dasharray="125.66"
            stroke-dashoffset="125.66"/>
  </svg>
  <span class="absolute inset-0 flex items-center justify-center">
    <svg class="h-4 w-4 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-width="2" d="M5 15l7-7 7 7"/>
    </svg>
  </span>
</button>