Loader Component API

Quick Start

1. Include the CSS and JavaScript

<link rel="stylesheet" href="styles/loader.css">
<script src="javascript/loader.js"></script>

2. Create a Loader

<!-- Inline spinner -->
<div class="rsl-loader rsl-loader-inline">
    <div class="rsl-loader-spinner"></div>
</div>

<!-- With message -->
<div class="rsl-loader rsl-loader-inline">
    <div class="rsl-loader-spinner"></div>
    <div class="rsl-loader-message">Loading...</div>
</div>

3. Or Use JavaScript API

// Show fullscreen loader
RSL.Loader.show('body', {
    mode: 'fullscreen',
    variant: 'spinner',
    message: 'Loading...'
});

// Hide after 3 seconds
setTimeout(() => RSL.Loader.hide('body'), 3000);

// Or show success state
RSL.Loader.success('body', 'Done!');

Spinner Variants

The Loader component includes 7 different spinner animations:

Spinner

Dual

Dots

Bars

Pulse

Ripple

Square

Data Attributes API

Configure loaders declaratively using data attributes:

Attribute	Values	Default	Description
`data-rsl-loader`	-	-	Initialize loader on element
`data-loader-variant`	`spinner`, `dual`, `dots`, `bars`, `pulse`, `ripple`, `square`, `progress-circle`, `progress-bar`	`spinner`	Spinner animation style
`data-loader-mode`	`fullscreen`, `overlay`, `inline`, `button`, `center`	`inline`	How the loader is positioned
`data-loader-size`	`sm`, `md`, `lg`, `xl`	`md`	Loader size
`data-loader-color`	`primary`, `success`, `warning`, `danger`, `info`, `light`, `dark`	`primary`	Color variant
`data-loader-message`	String	-	Message text below spinner
`data-loader-progress`	`0-100`	-	Initial progress value (for progress variants)
`data-loader-dismissible`	`true`, `false`	`false`	Show cancel button
`data-loader-auto-hide`	Number (ms)	-	Auto-hide after duration

JavaScript API

Methods

Method	Parameters	Description
`RSL.Loader.init()`	-	Initialize all loaders with data attributes
`RSL.Loader.create(target, options)`	Element/selector, config object	Create a loader instance
`RSL.Loader.show(target, options)`	Element/selector, config object	Show loader on target
`RSL.Loader.hide(target, options)`	Element/selector, { success, error, message }	Hide loader (optionally with state)
`RSL.Loader.setProgress(target, value)`	Element/selector, 0-100	Update progress value
`RSL.Loader.setMessage(target, text)`	Element/selector, string	Update message text
`RSL.Loader.success(target, message)`	Element/selector, string	Show success state and hide
`RSL.Loader.error(target, message)`	Element/selector, string	Show error state and hide
`RSL.Loader.destroy(target)`	Element/selector	Remove loader instance

Options Object

{
    variant: 'spinner',     // Spinner type
    mode: 'fullscreen',     // Position mode
    size: 'md',             // Size variant
    color: 'primary',       // Color variant
    message: 'Loading...',  // Message text
    progress: null,         // Initial progress (0-100)
    dismissible: false,     // Show cancel button
    dismissText: 'Cancel',  // Cancel button text
    autoHide: null,         // Auto-hide duration (ms)
    onShow: function(instance) {},    // Show callback
    onHide: function(instance) {},    // Hide callback
    onDismiss: function(instance) {}, // Dismiss callback
    onProgress: function(instance, value) {} // Progress callback
}

CSS Classes

Mode Classes

Class	Description
`.rsl-loader-fullscreen`	Full viewport overlay with backdrop
`.rsl-loader-overlay`	Covers parent element (needs `position: relative`)
`.rsl-loader-inline`	Flows with content, inline display
`.rsl-loader-button`	Inside buttons, adds right margin
`.rsl-loader-center`	Centered in parent, no backdrop

Size Classes

Class	Spinner Size
`.rsl-loader-sm`	24px
(default)	40px
`.rsl-loader-lg`	60px
`.rsl-loader-xl`	80px

Color Classes

Class	Color
`.rsl-loader-primary`	#667eea (Purple/Blue)
`.rsl-loader-success`	#28a745 (Green)
`.rsl-loader-warning`	#ffc107 (Yellow)
`.rsl-loader-danger`	#dc3545 (Red)
`.rsl-loader-info`	#17a2b8 (Cyan)
`.rsl-loader-light`	#f8f9fa (Light Gray)
`.rsl-loader-dark`	#343a40 (Dark Gray)

Accessibility

The Loader component is fully accessible and meets WCAG 2.1 AA standards:

Screen Reader Announcements: Loading start, progress milestones, and completion are announced via aria-live regions
ARIA Attributes: Loaders use role="status" and progress bars use role="progressbar" with proper aria-valuenow/min/max
Focus Management: Fullscreen loaders trap focus and restore it on close
Keyboard Navigation: Dismissible loaders can be closed with Escape key
Reduced Motion: Animations are disabled when prefers-reduced-motion: reduce is set
High Contrast: Supports Windows High Contrast mode with forced-colors

Best Practice

Always provide a meaningful message for long-running operations. Users should know what's happening and approximately how long it will take.

Next Steps

See Examples

View examples.html for comprehensive demos

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components