Progress Bar V2 API

Build powerful progress indicators with the V2 JSON API

Back to Component API Examples

Example 1: Color Variants

Render progress bars with different color variants using the V2 semantic API.

V2 Progress Variants • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-variants",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "progress", value: 65, variant: "primary" } },
        { content: { type: "progress", value: 80, variant: "success" } },
        { content: { type: "progress", value: 45, variant: "warning" } },
        { content: { type: "progress", value: 30, variant: "danger" } },
        { content: { type: "progress", value: 70, variant: "info" } }
    ]
});

Example 2: Sizes and Labels

Different sizes with label positioning options.

Sizes and Labels • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-sizes",
    breakpoints: { xs: 1 },
    gap: "1.5rem",
    items: [
        { content: { type: "progress", value: 75, size: "xs", variant: "primary" } },
        { content: { type: "progress", value: 75, size: "sm", variant: "primary" } },
        { content: { type: "progress", value: 75, size: "lg", label: "inside", variant: "success" } },
        { content: { type: "progress", value: 60, size: "xl", label: "inside", variant: "info" } }
    ]
});

Example 3: Animated Styles

Striped, animated, glow, and pulse effects.

Animated Styles • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-animated",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "progress", value: 60, striped: true, variant: "primary" } },
        { content: { type: "progress", value: 70, striped: true, animated: true, variant: "success" } },
        { content: { type: "progress", value: 80, glow: true, variant: "info" } },
        { content: { type: "progress", value: 50, pulse: true, variant: "warning" } }
    ]
});

Example 4: Gradient Styles

Beautiful gradient progress bars for eye-catching displays.

Gradient Progress • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-gradients",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        { content: { type: "progress", value: 70, gradient: "primary" } },
        { content: { type: "progress", value: 80, gradient: "fire" } },
        { content: { type: "progress", value: 60, gradient: "ocean" } },
        { content: { type: "progress", value: 90, gradient: "rainbow" } }
    ]
});

Example 5: Circular and Gauge

Radial progress indicators and speedometer-style gauges.

Circular and Gauge • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-circular",
    breakpoints: { xs: 2, md: 4 },
    gap: "2rem",
    items: [
        { content: { type: "progress", value: 75, shape: "circular", variant: "primary", size: "md" } },
        { content: { type: "progress", value: 60, shape: "circular", variant: "success", size: "lg" } },
        { content: { type: "progress", value: 40, shape: "gauge", variant: "warning" } },
        { content: { type: "progress", value: 85, shape: "gauge", variant: "success" } }
    ]
});

Example 6: Auto Thresholds

Progress bars that automatically change color based on value thresholds.

Threshold Colors • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-thresholds",
    breakpoints: { xs: 1 },
    gap: "1rem",
    items: [
        {
            content: {
                type: "progress",
                value: 30,
                size: "lg",
                label: "inside",
                thresholds: { warning: 50, danger: 80 }
            }
        },
        {
            content: {
                type: "progress",
                value: 65,
                size: "lg",
                label: "inside",
                thresholds: { warning: 50, danger: 80 }
            }
        },
        {
            content: {
                type: "progress",
                value: 90,
                size: "lg",
                label: "inside",
                thresholds: { warning: 50, danger: 80 }
            }
        }
    ]
});

Example 7: Milestones

Visual markers at key progress points - perfect for project tracking.

Milestone Progress • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-milestones",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "progress",
                value: 55,
                size: "lg",
                variant: "primary",
                milestones: [
                    { value: 25, label: "Q1" },
                    { value: 50, label: "Q2" },
                    { value: 75, label: "Q3" },
                    { value: 100, label: "Q4" }
                ]
            }
        }
    ]
});

Example 8: Step Progress

Discrete step indicators for multi-step workflows.

Step Progress • JS
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "progress-steps",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "progress",
                value: 3,
                max: 5,
                shape: "steps",
                steps: 5,
                variant: "primary",
                showValue: true
            }
        }
    ]
});

Example 9: Template System

Render progress bars from data arrays using the V2 template system.

Template-Driven Progress • JS
const skills = [
    { name: "JavaScript", level: 95, color: "primary" },
    { name: "CSS/SCSS", level: 90, color: "success" },
    { name: "React", level: 85, color: "info" },
    { name: "Node.js", level: 75, color: "warning" }
];

RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "skill-progress",
    breakpoints: { xs: 1 },
    gap: "1.5rem",
    template: {
        data: skills,
        item: {
            content: {
                type: "card",
                title: "{{name}}",
                body: {
                    type: "progress",
                    value: "{{level}}",
                    variant: "{{color}}",
                    label: "inside",
                    size: "lg"
                }
            }
        }
    }
});