Loader

The Loader creates a full-screen overlay that blocks user interaction during critical operations. It provides clear feedback that the system is working.

Visual Specifications

Property	Value
Size	Full viewport (100vw × 100vh)
Background (default)	Solid white (`primary-tselWhite`)
Background (transparent)	`rgba(0, 0, 0, 0.5)` (50% black)
Z-index	`9999`
Position	Fixed, top: 0, left: 0
Transition	700ms (`duration-700`)
Spinner	`loader.png` image with `animate-spin`
Layout	Flex, centered

Variants

Solid white background (bg-primary-tselWhite) — default loader overlay blocking all interaction

50% black overlay (rgba(0, 0, 0, 0.5)) — shows underlying content while loading. Activated via config.isBgTransparent.

Configuration Options

Option	Type	Default	Description
`isDisabled`	boolean	`false`	Completely removes loader from DOM
`isLoading`	boolean	`false`	Toggles loader visibility (fades out when false)
`config.isBgTransparent`	boolean	`false`	Uses 50% black overlay instead of solid white
`config.isBgWhite`	boolean	`false`	Forces solid white background
`queue`	async pipe	`0`	Queue counter — hidden when queue resolves to 0

Usage Guidance

When to use

During page transitions
For complex operations blocking the entire UI
When multiple async operations need unified loading
To prevent user interaction during critical operations

Best practices

✅ Do	❌ Don’t
Keep loading times short (under 5 seconds)	Use for quick operations (< 500ms)
Use descriptive messages for long operations	Block navigation unnecessarily
Disable on routes where it’s not needed	Use without clear context
Provide feedback for operations over 3 seconds	Overuse for every small operation

Loading Duration Guidelines

Duration	Recommendation
< 1s	No loader needed
1-3s	Consider skeleton or inline loader
3-10s	Full loader with message
> 10s	Consider progress indicator

Live Demo

View in Storybook →