Preloader
preloader-tw
loadingyourexperience.
Content Revealed!
This content was hidden behind the preloader
Customize
1500
99
0
10
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 |