Loader - JSON API Examples

Example 1: Spinner Variants

Create different spinner types using the V2 JSON API. Each variant offers a unique loading animation style.

const config = {
    version: 2,
    layoutId: "loader-variants",
    breakpoints: { xs: 2, sm: 3, md: 4, lg: 7 },
    gap: "2rem",
    items: [
        { content: { type: "loader", variant: "spinner", color: "primary" } },
        { content: { type: "loader", variant: "dual", color: "info" } },
        { content: { type: "loader", variant: "dots", color: "success" } },
        { content: { type: "loader", variant: "bars", color: "warning" } },
        { content: { type: "loader", variant: "pulse", color: "danger" } },
        { content: { type: "loader", variant: "ripple", color: "primary" } },
        { content: { type: "loader", variant: "square", color: "info" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo1-output', config);

Example 2: Size Variants

Control the size of loaders with sm, md, lg, and xl options.

const config = {
    version: 2,
    layoutId: "loader-sizes",
    breakpoints: { xs: 2, md: 4 },
    gap: "2rem",
    items: [
        { content: { type: "loader", variant: "spinner", size: "sm", color: "primary" } },
        { content: { type: "loader", variant: "spinner", size: "md", color: "primary" } },
        { content: { type: "loader", variant: "spinner", size: "lg", color: "primary" } },
        { content: { type: "loader", variant: "spinner", size: "xl", color: "primary" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo2-output', config);

Example 3: Color Variants

Apply semantic color themes to loaders for different contexts.

const config = {
    version: 2,
    layoutId: "loader-colors",
    breakpoints: { xs: 2, sm: 3, md: 4, lg: 7 },
    gap: "2rem",
    items: [
        { content: { type: "loader", variant: "spinner", color: "primary" } },
        { content: { type: "loader", variant: "spinner", color: "success" } },
        { content: { type: "loader", variant: "spinner", color: "warning" } },
        { content: { type: "loader", variant: "spinner", color: "danger" } },
        { content: { type: "loader", variant: "spinner", color: "info" } },
        { content: { type: "loader", variant: "dots", color: "light" } },
        { content: { type: "loader", variant: "dots", color: "dark" } }
    ]
};

RSL.JSONLayout.renderLayout('#demo3-output', config);

Example 4: Loaders with Messages

Add contextual messages below loaders to inform users about the loading state.

const config = {
    version: 2,
    layoutId: "loader-messages",
    breakpoints: { xs: 1, md: 3 },
    gap: "2rem",
    items: [
        {
            content: {
                type: "loader",
                variant: "spinner",
                color: "primary",
                message: "Loading..."
            }
        },
        {
            content: {
                type: "loader",
                variant: "dots",
                color: "success",
                message: "Processing request"
            }
        },
        {
            content: {
                type: "loader",
                variant: "bars",
                color: "info",
                message: "Syncing data..."
            }
        }
    ]
};

RSL.JSONLayout.renderLayout('#demo4-output', config);

Example 5: Programmatic Loader Control

Use the RSL.Loader API to show, update, and hide loaders programmatically. This is useful for async operations.

// Fullscreen loader with auto-dismiss
RSL.Loader.show('body', {
    mode: 'fullscreen',
    variant: 'spinner',
    message: 'Please wait...',
    dismissible: true,
    autoHide: 3000  // Auto-hide after 3 seconds
});

// Overlay loader on a specific container
RSL.Loader.show('#my-container', {
    mode: 'overlay',
    variant: 'dots',
    message: 'Loading content...'
});

// Progress loader with simulation
RSL.Loader.show('#container', {
    mode: 'center',
    variant: 'progress-circle',
    size: 'lg',
    progress: 0,
    message: 'Uploading...'
});

// Update progress
RSL.Loader.setProgress('#container', 50);

// Show success state
RSL.Loader.success('#container', 'Upload complete!');

// Or show error state
RSL.Loader.error('#container', 'Upload failed');

Example 6: Template-based Loading States

Use the V2 template system to generate multiple loaders from data, useful for loading indicators across card grids.

const loadingStates = [
    { variant: "spinner", color: "primary", label: "Loading Dashboard" },
    { variant: "dots", color: "success", label: "Fetching Analytics" },
    { variant: "bars", color: "info", label: "Syncing Data" },
    { variant: "pulse", color: "warning", label: "Processing" }
];

const config = {
    version: 2,
    layoutId: "loader-template",
    breakpoints: { xs: 1, sm: 2, md: 4 },
    gap: "1.5rem",
    template: {
        data: loadingStates,
        item: {
            content: {
                type: "card",
                title: "{{label}}",
                variant: "outlined",
                customContent: {
                    type: "loader",
                    variant: "{{variant}}",
                    color: "{{color}}",
                    size: "lg"
                }
            }
        }
    }
};

RSL.JSONLayout.renderLayout('#demo6-output', config);