Progress Bar Examples

Comprehensive demos of all progress bar features and configurations

Color Variants

Eight built-in color variants to match your design system.

Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Color Variants • HTML

Size Variants

Five size options from extra-small to extra-large.

Extra Small (xs)
Small (sm)
Medium (md) - Default
Large (lg)
Extra Large (xl)
Size Variants • HTML

Striped & Animated

Add visual interest with striped patterns and animations.

Striped
Striped + Animated
Glow Effect
Pulse Animation
Animations • HTML

Gradient Styles

Beautiful gradient fills for eye-catching progress indicators.

Primary Gradient
Success Gradient
Warning Gradient
Fire Gradient
Ocean Gradient
Rainbow Gradient
Gradients • HTML

Label Positions

Display progress values in different positions with custom formats.

Label Inside (default)
Label Outside
Label Floating
Custom Format: {value}/{max}
Labels • HTML

Circular Progress

Radial/donut style progress indicators perfect for dashboards.

Small

Medium

Large

Extra Large

Circular Progress • HTML

Gauge / Semi-Circular

Speedometer-style gauges for metrics and KPIs.

Low (35%)

Medium (65%)

High (90%)

Gauge Progress • HTML

Indeterminate State

For loading states when progress is unknown.

Indeterminate (sliding)
Indeterminate + Shimmer
Indeterminate • HTML

Auto Thresholds

Automatically change color based on value thresholds.

Storage Usage (green < 50%, yellow 50-80%, red > 80%)
Thresholds • HTML
<div data-rsl-progress
     data-value="30"
     data-size="lg"
     data-thresholds='{"warning": 50, "danger": 80}'></div>

Buffer Indicator

Show buffered/loaded content like video players.

Video Progress (blue = played, light = buffered)
Buffer • HTML

Milestones

Visual markers at key progress points.

Project Progress with Milestones
Milestones • HTML
<div data-rsl-progress
     data-value="55"
     data-size="lg"
     data-milestones='[
       {"value": 25, "label": "Q1"},
       {"value": 50, "label": "Q2"},
       {"value": 75, "label": "Q3"},
       {"value": 100, "label": "Q4"}
     ]'></div>

Step Progress

Discrete steps for multi-step workflows.

Step Progress • HTML

Animate on View

Progress bars animate when scrolled into view - perfect for landing pages.

JavaScript 95%
CSS/SCSS 90%
React 85%
Node.js 75%
Skill Bars with Animate on View • HTML

    

        JavaScript
        95%

JavaScript API Demo

Full programmatic control of progress bars.

JavaScript API • JS
const progress = document.getElementById('api-demo');

// Set value
RSL.Progress.setValue(progress, 75);

// Increment/Decrement
RSL.Progress.increment(progress, 10);
RSL.Progress.decrement(progress, 5);

// Animate
RSL.Progress.animate(progress, 100, 2000, () => {
    console.log('Animation complete!');
});

// Reset/Complete
RSL.Progress.reset(progress);
RSL.Progress.complete(progress);