Preloader

Animated loading screens with multiple style variants

preloader-tw

loadingyourexperience.

Content Revealed!

This content was hidden behind the preloader

Customize

Tweak the props live

Background Color

#B19EEF

Variant

Duration (ms)1500

Respect Reduced Motion

Text Fade Threshold (%)99

Backdrop Blur (px)0

Stair Count10

Reveal From

Reveal Direction

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

Default:false

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

Default:2500

loadingTextstring

Loading text to display (for stairs and circle variants)

Default:"Loading your next level experience"

zIndexnumber

Z-index for the preloader

Default:50

bgColorstring

Background color (overrides default)

Default:undefined

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)

Default:true

percentageTextClassNamestring

CSS classes for percentage text (percentage variant only)

Default:""

showProgressBarboolean

Show progress bar (percentage variant only)

Default:true

progressBarPosition"top" | "bottom"

Progress bar position (percentage variant only)

Default:"bottom"

stairCountnumber

Number of stairs (stairs variant only)

Default:10

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

Default:undefined

onLoadingStart() => void

Callback function when loading starts

Default:undefined

onLoadingComplete() => void

Callback function when exit animation completes

Default:undefined

respectReducedMotionboolean

Respect prefers-reduced-motion system setting

Default:false

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

Default:99

backdropBlurnumber

Backdrop blur amount in pixels

Default:0

customContent(progress: number) => ReactNode

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

Default:undefined

classNamestring

Additional CSS classes for styling

Default:""

childrenReactNode

Content to show after loading completes

Default:undefined