Scroll Progress Ring
NewFree
A floating ring that shows how far a page has been read and turns into a back-to-top button at the end.
Customize
56px
3px
#ff784f
Show percent
Side
When to use it
- Long articles, devlogs and documentation pages
- Long landing pages where the way back up is far away
- Scrolling panels such as a changelog or terms box, using the target prop
Good to know
- Plan
- Free, MIT license
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 200
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/scroll-progress-ring.jsonWorks in any project set up with the shadcn CLI.
- Copy the code from the Code tab into
components/ui/scroll-progress-ring.tsx.
Free under the MIT license. If it saved you time, star the repo on GitHub: it helps other developers find it.
Usage
import { ScrollProgressRing } from "@/components/ui/scroll-progress-ring";
// In a page or layout. It follows the page scroll and floats in the corner.
<ScrollProgressRing color="#ff784f" />Props
13 properties| Property | Type | Default | Description |
|---|---|---|---|
| target | RefObject<HTMLElement | null> | — | Scrolling element to follow. Leave it out to follow the page. With a target the ring is absolutely positioned, so wrap both in a relative parent. |
| size | number | 56 | Diameter of the ring, in pixels. |
| thickness | number | 3 | Thickness of the line, in pixels. |
| color | string | "#ff784f" | Color of the progress line and of the finished button. |
| iconColor | string | "#070606" | Color of the arrow on the finished button. |
| showPercent | boolean | true | Show the percentage inside the ring. |
| showAfter | number | 0.03 | Progress at which the ring appears, from 0 to 1. |
| endAt | number | 0.985 | Progress at which it turns into the back-to-top button, from 0 to 1. |
| side | "left" | "right" | "right" | Corner of the page it floats in. |
| offset | number | 24 | Distance from the corner, in pixels. |
| label | string | "Back to top" | Accessible name of the button. |
| onBackToTop | () => void | — | Called when the button is pressed. |
| className | string | — | Extra classes for the button. |