Progress

Progress bars and indicators

View Source

Examples

Sizes

Progress bars in different heights.

.progress-xs

.progress-sm

.progress (default)

.progress-lg

html

Colors

Semantic color variants for different states.

Primary (default)

Success

Warning

Destructive

html

Animated Variants

Striped and animated progress indicators.

Striped

Striped & Animated

Indeterminate (Loading)

html

With Label

Progress bars with text labels inside.

65%

Complete

html

Usage

Cleopatra - Modern Admin Dashboard

html

<div class="progress">
            <div class="progress-bar" style="width: 60%"></div>
        </div>
    
        <!-- With color -->
        <div class="progress progress-success">
            <div class="progress-bar" style="width: 80%"></div>
        </div>
    
        <!-- Animated -->
        <div class="progress progress-striped progress-animated">
            <div class="progress-bar" style="width: 70%"></div>
        </div>