Preloader

Animated loading screens with multiple style variants

preloader-tw

loadingyourexperience.

Content Revealed!

This content was hidden behind the preloader

Customize

Background Color

Duration (ms)

1500

Respect Reduced Motion

Text Fade Threshold (%)

Backdrop Blur (px)

Stair Count

Props

Name	Type	Default	Description
`loading`	boolean	`false`	Whether the preloader is active
`variant`	"stairs" \| "percentage" \| "circle" \| "slide" \| "curtain"	`"stairs"`	Visual variant of the preloader animation
`position`	"fixed" \| "absolute"	`"absolute"`	Position type of the preloader container
`duration`	number	`2500`	Duration of the loading animation in milliseconds
`loadingText`	string	`"Loading your next level experience"`	Loading text to display (for stairs and circle variants)
`zIndex`	number	`50`	Z-index for the preloader
`bgColor`	string	`undefined`	Background color (overrides default)
`textClassName`	string	`""`	CSS classes for the loading text
`percentagePosition`	"center" \| "bottom-left" \| "top-left"	`"center"`	Position of percentage counter (percentage variant only)
`showPercentageSign`	boolean	`true`	Show percentage sign (percentage variant only)
`percentageTextClassName`	string	`""`	CSS classes for percentage text (percentage variant only)
`showProgressBar`	boolean	`true`	Show progress bar (percentage variant only)
`progressBarPosition`	"top" \| "bottom"	`"bottom"`	Progress bar position (percentage variant only)
`stairCount`	number	`10`	Number of stairs (stairs variant only)
`stairsRevealFrom`	"left" \| "right" \| "center"	`"left"`	Direction stairs reveal from (stairs variant only)
`stairsRevealDirection`	"up" \| "down"	`"up"`	Direction stairs move when revealing (stairs variant only)
`onComplete`	() => void	`undefined`	Callback function when loading completes
`onLoadingStart`	() => void	`undefined`	Callback function when loading starts
`onLoadingComplete`	() => void	`undefined`	Callback function when exit animation completes
`respectReducedMotion`	boolean	`false`	Respect prefers-reduced-motion system setting
`reducedMotionFallback`	"fade" \| "none"	`"fade"`	Fallback behavior when reduced motion is preferred (fade or instant)
`ariaLabel`	string	`"Loading content"`	ARIA label for screen readers
`ariaLive`	"polite" \| "assertive" \| "off"	`"polite"`	ARIA live region politeness level
`textFadeThreshold`	number	`99`	Progress threshold (0-100) when loading text starts fading out
`backdropBlur`	number	`0`	Backdrop blur amount in pixels
`customContent`	(progress: number) => ReactNode	`undefined`	Custom content render function that receives current progress (0-100)
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content to show after loading completes

loadingboolean

Whether the preloader is active

Defaultfalse

variant"stairs" | "percentage" | "circle" | "slide" | "curtain"

Visual variant of the preloader animation

Default"stairs"

position"fixed" | "absolute"

Position type of the preloader container

Default"absolute"

durationnumber

Duration of the loading animation in milliseconds

Default2500

loadingTextstring

Loading text to display (for stairs and circle variants)

Default"Loading your next level experience"

zIndexnumber

Z-index for the preloader

Default50

bgColorstring

Background color (overrides default)

Defaultundefined

textClassNamestring

CSS classes for the loading text

Default""

percentagePosition"center" | "bottom-left" | "top-left"

Position of percentage counter (percentage variant only)

Default"center"

showPercentageSignboolean

Show percentage sign (percentage variant only)

Defaulttrue

percentageTextClassNamestring

CSS classes for percentage text (percentage variant only)

Default""

showProgressBarboolean

Show progress bar (percentage variant only)

Defaulttrue

progressBarPosition"top" | "bottom"

Progress bar position (percentage variant only)

Default"bottom"

stairCountnumber

Number of stairs (stairs variant only)

Default10

stairsRevealFrom"left" | "right" | "center"

Direction stairs reveal from (stairs variant only)

Default"left"

stairsRevealDirection"up" | "down"

Direction stairs move when revealing (stairs variant only)

Default"up"

onComplete() => void

Callback function when loading completes

Defaultundefined

onLoadingStart() => void

Callback function when loading starts

Defaultundefined

onLoadingComplete() => void

Callback function when exit animation completes

Defaultundefined

respectReducedMotionboolean

Respect prefers-reduced-motion system setting

Defaultfalse

reducedMotionFallback"fade" | "none"

Fallback behavior when reduced motion is preferred (fade or instant)

Default"fade"

ariaLabelstring

ARIA label for screen readers

Default"Loading content"

ariaLive"polite" | "assertive" | "off"

ARIA live region politeness level

Default"polite"

textFadeThresholdnumber

Progress threshold (0-100) when loading text starts fading out

Default99

backdropBlurnumber

Backdrop blur amount in pixels

Default0

customContent(progress: number) => ReactNode

Custom content render function that receives current progress (0-100)

Defaultundefined

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content to show after loading completes

Defaultundefined