progress Component

Progress Bar System

Basic Progress Bars

Progress Bar Sizes

Color System

Semantic Colors

Extended Color Palette

Progress with Labels

Striped Progress Bars

Animated Progress Bars

Progress with External Label

Project Progress 45%
Upload Progress 72%
Download Speed 2.5 MB/s

Segmented Progress

Circular Progress

25%
50%
75%
85%
95%

Indeterminate Progress

Progress in Context

File Upload Progress

document.pdf 2.4 MB / 5.2 MB
image.jpg Complete
video.mp4 Waiting...

JavaScript API

Dynamic Progress Control

Animated Progress

Create Progress Dynamically

Code Examples

// Simple HTML - Auto-renders on page load
<div class="progress" data-value="50"></div>

// JavaScript API
Progress.set('my-progress', 75);                  // Set to 75%
Progress.increment('my-progress', 10);            // Add 10%
Progress.decrement('my-progress', 10);            // Subtract 10%
Progress.complete('my-progress');                 // Set to 100%
Progress.reset('my-progress');                    // Set to 0%

// Animated transitions
Progress.animate('my-progress', 100, 2000);       // Animate to 100% over 2 seconds

// Create dynamically
const progress = Progress.create({
    value: 50,
    color: 'primary',
    size: 'large',
    striped: true,
    animated: true,
    container: '#my-container'
});

// Get current value
const value = Progress.get('my-progress');        // Returns current percentage