Preloader

Loading screens in five styles

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

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