Pluto UIpluto/ui
Components

Scroll Percentage

A customizable scroll percentage indicator component that displays at the bottom right, supporting multiple UI variants.

// Code for scroll-percentage/basic

Installation

Loading installation instructions...

Usage

import { ScrollPercentage } from "@/components/pluto-ui/scroll-percentage"
<ScrollPercentage variant="bar" />

Variants

The component supports multiple UI variants:

Bar Variant

The bar variant displays a horizontal progress bar with markers, similar to the image reference. Major markers (every 5th) are highlighted, and an active indicator bar shows the current scroll position.

// Code for scroll-percentage/basic

Circle Variant

A circular progress indicator that fills as you scroll. Optionally displays percentage text in the center.

// Code for scroll-percentage/circle

Minimal Variant

A simple horizontal progress bar that fills from left to right.

// Code for scroll-percentage/minimal

Dots Variant

A series of dots that highlight as you scroll through the content.

// Code for scroll-percentage/dots

Custom Render

For complete control over the UI, use the renderIndicator prop to create your own custom design.

// Code for scroll-percentage/custom-render

API Reference

Props

PropTypeDefaultDescription
variant"bar" | "circle" | "minimal" | "dots""bar"The variant/style of the scroll indicator
classNamestring-Custom className for the container
indicatorClassNamestring-Custom className for the indicator element
markersnumber30Number of markers/dots for bar and dots variants
activeColorstring"rgb(255, 107, 107)"Color of the active indicator
inactiveColorstring"currentColor"Color of inactive markers
showPercentagebooleanfalseShow percentage text
renderIndicator(percentage: number) => ReactNode-Custom render function for the indicator
bottomOffsetstring"bottom-4"Offset from bottom (Tailwind class)
rightOffsetstring"right-4"Offset from right (Tailwind class)
containerRefRefObject<HTMLElement>-The scrollable container element. If not provided, automatically detects the nearest scrollable parent
fixedbooleanfalseUse fixed positioning relative to viewport (default: absolute relative to container)

Credits

Inspired by the Anime.js scrollbar component from Skiper UI.

Scanner Reveal

An animated card stream component with a scanner effect that reveals ASCII art as cards pass through.

Split Flap Display

A split-flap display component with smooth flip animations using motion, like airport displays. Works with any text or content.

On this page

InstallationUsageVariantsBar VariantCircle VariantMinimal VariantDots VariantCustom RenderAPI ReferencePropsCredits