Scroll Progress

Docs

Scroll Progress

A background dot pattern made with SVGs, fully customizable using Tailwind CSS.

scroll-progress-01

Note: The scroll progress is shown below the navbar of the page.

Designali is a collection of re-usable components that you can copy and paste into your web apps. It primarily features components, blocks, and templates geared towards creating landing pages and user-facing marketing materials.

Installation

pnpm dlx shadcn@latest add "https://designali.in/r/scroll-progress"

Props

Prop	Type	Description	Default
width	any	Width of the dot pattern	16
height	any	Height of the dot pattern	16
x	any	X position of the dot	0
y	any	Y position of the dot	0
cx	any	X position of the circle	1
cy	any	Y position of the circle	1
cr	any	Radius of the circle	1
className	string	Class name of the dot pattern	-

Ripple Macbook

On This Page

Installation
Props