## Status Progress

Progress indicators showing completion status and loading states.

### Basic Progress Bar

33%
HTML

    <progress value="3333" max="10000">33%</progress>

### Basic Progress Bar

HTML

    <div style="max-width: 400px">
                <div
                    class="progress_bar"
                    style="
                        width: 100%;
                        height: 8px;
                        background: var(--color_fill_secondary);
                        border-radius: 4px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress_bar--fill"
                        style="
                            width: 65%;
                            height: 100%;
                            background: var(--color_fill_primary);
                            transition: width 0.3s;
                        "
                    ></div>
                </div>
            </div>

### Progress with Label

Uploading file... 75%
HTML

    <div style="max-width: 400px">
                <div
                    style="
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 8px;
                        font-size: 14px;
                    "
                >
                    <span>Uploading file...</span>
                    <span>75%</span>
                </div>
                <div
                    class="progress_bar"
                    style="
                        width: 100%;
                        height: 10px;
                        background: var(--color_fill_secondary);
                        border-radius: 5px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress_bar--fill"
                        style="
                            width: 75%;
                            height: 100%;
                            background: var(--color_fill_primary);
                        "
                    ></div>
                </div>
            </div>

### Progress Sizes

Small
Medium
Large
HTML

    <div
                style="
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    max-width: 400px;
                "
            >
                <!-- Small -->
                <div>
                    <label
                        style="
                            font-size: 12px;
                            opacity: 0.7;
                            display: block;
                            margin-bottom: 4px;
                        "
                    >
                        Small
                    </label>
                    <div
                        class="progress_bar progress_bar--small"
                        style="
                            width: 100%;
                            height: 4px;
                            background: var(--color_fill_secondary);
                            border-radius: 2px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 40%;
                                height: 100%;
                                background: var(--color_fill_primary);
                            "
                        ></div>
                    </div>
                </div>
                <!-- Medium -->
                <div>
                    <label
                        style="
                            font-size: 12px;
                            opacity: 0.7;
                            display: block;
                            margin-bottom: 4px;
                        "
                    >
                        Medium
                    </label>
                    <div
                        class="progress_bar progress_bar--medium"
                        style="
                            width: 100%;
                            height: 8px;
                            background: var(--color_fill_secondary);
                            border-radius: 4px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 60%;
                                height: 100%;
                                background: var(--color_fill_primary);
                            "
                        ></div>
                    </div>
                </div>
                <!-- Large -->
                <div>
                    <label
                        style="
                            font-size: 12px;
                            opacity: 0.7;
                            display: block;
                            margin-bottom: 4px;
                        "
                    >
                        Large
                    </label>
                    <div
                        class="progress_bar progress_bar--large"
                        style="
                            width: 100%;
                            height: 16px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 80%;
                                height: 100%;
                                background: var(--color_fill_primary);
                            "
                        ></div>
                    </div>
                </div>
            </div>

### Colored Progress

Completed ✓
Storage Used ⚠
Critical ✕
Syncing ℹ
HTML

    <div
                style="
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    max-width: 400px;
                "
            >
                <!-- Success -->
                <div>
                    <label
                        style="font-size: 13px; display: block; margin-bottom: 6px"
                    >
                        Completed ✓
                    </label>
                    <div
                        class="progress_bar"
                        style="
                            width: 100%;
                            height: 10px;
                            background: var(--color_fill_secondary);
                            border-radius: 5px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 100%;
                                height: 100%;
                                background: var(--color_state_success);
                            "
                        ></div>
                    </div>
                </div>
                <!-- Warning -->
                <div>
                    <label
                        style="font-size: 13px; display: block; margin-bottom: 6px"
                    >
                        Storage Used ⚠
                    </label>
                    <div
                        class="progress_bar"
                        style="
                            width: 100%;
                            height: 10px;
                            background: var(--color_fill_secondary);
                            border-radius: 5px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 85%;
                                height: 100%;
                                background: var(--color_state_warning);
                            "
                        ></div>
                    </div>
                </div>
                <!-- Error -->
                <div>
                    <label
                        style="font-size: 13px; display: block; margin-bottom: 6px"
                    >
                        Critical ✕
                    </label>
                    <div
                        class="progress_bar"
                        style="
                            width: 100%;
                            height: 10px;
                            background: var(--color_fill_secondary);
                            border-radius: 5px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 95%;
                                height: 100%;
                                background: var(--color_state_error);
                            "
                        ></div>
                    </div>
                </div>
                <!-- Info -->
                <div>
                    <label
                        style="font-size: 13px; display: block; margin-bottom: 6px"
                    >
                        Syncing ℹ
                    </label>
                    <div
                        class="progress_bar"
                        style="
                            width: 100%;
                            height: 10px;
                            background: var(--color_fill_secondary);
                            border-radius: 5px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 45%;
                                height: 100%;
                                background: var(--color_state_info);
                            "
                        ></div>
                    </div>
                </div>
            </div>

### Striped & Animated Progress

Striped Pattern
Indeterminate Loading
HTML

    <div
                style="
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    max-width: 400px;
                "
            >
                <!-- Striped -->
                <div>
                    <label
                        style="font-size: 13px; display: block; margin-bottom: 6px"
                    >
                        Striped Pattern
                    </label>
                    <div
                        class="progress_bar"
                        style="
                            width: 100%;
                            height: 16px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 60%;
                                height: 100%;
                                background: repeating-linear-gradient(
                                    45deg,
                                    var(--color_fill_primary),
                                    var(--color_fill_primary) 10px,
                                    rgba(255, 255, 255, 0.2) 10px,
                                    rgba(255, 255, 255, 0.2) 20px
                                );
                            "
                        ></div>
                    </div>
                </div>
                <!-- Indeterminate -->
                <div>
                    <label
                        style="font-size: 13px; display: block; margin-bottom: 6px"
                    >
                        Indeterminate Loading
                    </label>
                    <div
                        class="progress_bar progress_bar--indeterminate"
                        style="
                            width: 100%;
                            height: 8px;
                            background: var(--color_fill_secondary);
                            border-radius: 4px;
                            overflow: hidden;
                            position: relative;
                        "
                    >
                        <div
                            style="
                                position: absolute;
                                width: 30%;
                                height: 100%;
                                background: var(--color_fill_primary);
                                animation: indeterminate 1.5s infinite linear;
                                border-radius: 4px;
                            "
                        ></div>
                    </div>
                </div>
            </div>
            <style>
                @keyframes indeterminate {
                    0% {
                        left: -30%;
                    }
                    100% {
                        left: 100%;
                    }
                }
            </style>

### Multi-Segment Progress

Storage Usage 78 GB / 100 GB
Documents Photos Videos Free
HTML

    <div style="max-width: 450px">
                <div
                    style="
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 8px;
                        font-size: 13px;
                    "
                >
                    <span>Storage Usage</span>
                    <span>78 GB / 100 GB</span>
                </div>
                <div
                    class="progress_bar"
                    style="
                        width: 100%;
                        height: 20px;
                        background: var(--color_fill_secondary);
                        border-radius: 10px;
                        overflow: hidden;
                        display: flex;
                    "
                >
                    <div
                        style="
                            width: 45%;
                            height: 100%;
                            background: var(--color_state_info);
                        "
                        title="Documents: 45GB"
                    ></div>
                    <div
                        style="
                            width: 20%;
                            height: 100%;
                            background: var(--color_state_success);
                        "
                        title="Photos: 20GB"
                    ></div>
                    <div
                        style="
                            width: 13%;
                            height: 100%;
                            background: var(--color_state_warning);
                        "
                        title="Videos: 13GB"
                    ></div>
                </div>
                <div
                    style="
                        display: flex;
                        gap: 16px;
                        margin-top: 12px;
                        font-size: 12px;
                        flex-wrap: wrap;
                    "
                >
                    <span style="display: flex; align-items: center; gap: 6px">
                        <span
                            style="
                                width: 12px;
                                height: 12px;
                                background: var(--color_state_info);
                                border-radius: 3px;
                            "
                        ></span>
                        Documents
                    </span>
                    <span style="display: flex; align-items: center; gap: 6px">
                        <span
                            style="
                                width: 12px;
                                height: 12px;
                                background: var(--color_state_success);
                                border-radius: 3px;
                            "
                        ></span>
                        Photos
                    </span>
                    <span style="display: flex; align-items: center; gap: 6px">
                        <span
                            style="
                                width: 12px;
                                height: 12px;
                                background: var(--color_state_warning);
                                border-radius: 3px;
                            "
                        ></span>
                        Videos
                    </span>
                    <span style="display: flex; align-items: center; gap: 6px">
                        <span
                            style="
                                width: 12px;
                                height: 12px;
                                background: var(--color_fill_secondary);
                                border-radius: 3px;
                            "
                        ></span>
                        Free
                    </span>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!