Loader Examples

Interactive demos showcasing all loader variants and features

Fullscreen Loader

Click to see a fullscreen loading overlay with different variants:

Fullscreen Loader JS
RSL.Loader.show('body', {
    mode: 'fullscreen',
    variant: 'spinner',
    message: 'Loading data...',
    autoHide: 2000
});

All Spinner Variants

Spinner

Dual

Dots

Bars

Pulse

Ripple

Square

Size Variants

Small (24px)

Medium (40px)

Large (60px)

X-Large (80px)

Color Variants

Primary

Success

Warning

Danger

Info

Light

Progress Indicators

Click to simulate a progress loading operation:

Click a button above to see progress indicator

Success & Error States

See how loaders can transition to success or error states:

Button Loading State

Click the button to see an inline loading state:

Button with Loader HTML
<button class="btn btn-primary" onclick="handleSubmit(this)">
    <span class="btn-text">Submit Form</span>
</button>

<script>
function handleSubmit(btn) {
    btn.disabled = true;
    btn.innerHTML = '<div class="rsl-loader rsl-loader-button rsl-loader-sm rsl-loader-light">' +
        '<div class="rsl-loader-spinner"></div></div> Submitting...';

    setTimeout(() => {
        btn.disabled = false;
        btn.innerHTML = '<span class="btn-text">Submit Form</span>';
    }, 2000);
}
</script>