FR | EN
Install
Documentation

Documentation - Progress Bar.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Basic concepts

Utilities

Components

Progress Bar

Marssel's progress bars allow you to visually display the progress of a task or process. They are fully customizable via custom CSS properties and support different styles: simple, with text, animated, or with gradients. Use the progress-container and progress-bar classes to create elegant and accessible progress indicators.

Basic progress bar

Preview 
<div class="progress-container---[w-[100%]+h-[20px]+bg-[red]+rounded-[20px]+overflow-[hidden]+pos-[relative]]">
    <div class="progress-bar---[h-[100%]+bg-[4285f4]+rounded-[20px]+transition-[width_0.5s_ease]+w-[65%]+pos-[relative]]"
        role="progressbar"
        aria-valuenow="65"
        aria-valuemin="0"
        aria-valuemax="100"
    >
    </div>
</div>

With hint text

Preview
75% 
<!-- Progress with percentage -->
<div class="progress-container2---[w-[100%]+h-[24px]+bg-[f0f0f0]+rounded-[12px]+overflow-[hidden]+pos-[relative]]">
    <div class="progress-bar2---[h-[100%]+bg-[10b981]+w-[75%]+pos-[relative]]"
        role="progressbar"
        aria-valuenow="75"
        aria-valuemin="0"
        aria-valuemax="100">
        <span class="progress-text2---[pos-[absolute]+right-[10px]+top-[50%]+transform-[translateY(-50%)]+font-size-[12px]+c-[white]]">
        75%
        </span>
    </div>
</div>

Different sizes

Preview 
<!-- Small -->
<div class="progress-container-small---[w-[100%]+h-[8px]+bg-[e5e7eb]+rounded-[4px]+overflow-[hidden]]">
    <div class="progress-bar-small---[h-[100%]+bg-[0B63F3]+w-[40%]]"></div>
</div>

<!-- Average (default) -->
<div class="progress-container-default---[w-[100%]+h-[20px]+bg-[e5e7eb]+rounded-[10px]+overflow-[hidden]+mt-[10px]]">
    <div class="progress-bar-default---[h-[100%]+bg-[0B63F3]+w-[60%]]"></div>
</div>

<!-- Large -->
<div class="progress-container-large---[w-[100%]+h-[32px]+bg-[e5e7eb]+rounded-[16px]+overflow-[hidden]+mt-[10px]]">
    <div class="progress-bar-large---[h-[100%]+bg-[0B63F3]+w-[80%]]"></div>
</div>

Colors and variations

Preview 
<!-- Success (green) -->
<div class="progress-container-success---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]+mb-[10px]]">
    <div class="progress-bar-success---[h-[100%]+bg-[10b981]+w-[100%]]"></div>
</div>

<!-- Warning (orange) -->
<div class="progress-container-warning---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]+mb-[10px]]">
    <div class="progress-bar-warning---[h-[100%]+bg-[f59e0b]+w-[45%]]"></div>
</div>

<!-- Danger (red) -->
<div class="progress-container-danger---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]+mb-[10px]]">
    <div class="progress-bar-danger---[h-[100%]+bg-[D41212]+w-[25%]]"></div>
</div>

<!-- Info (blue) -->
<div class="progress-container-info---[w-[100%]+h-[20px]+bg-[e0e0e0]+rounded-[10px]+overflow-[hidden]]">
    <div class="progress-bar-info---[h-[100%]+bg-[0B63F3]+w-[70%]]"></div>
</div>

With gradients

Preview 
<!-- Simple linear gradient -->
<div class="progress-container-dls---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]]">
    <div class="progress-bar-dls---[h-[100%]+w-[65%]]
                bg-linear-[90deg,6366f1_0%,8b5cf6_100%]"
        role="progressbar"
        aria-valuenow="65"
        aria-valuemin="0"
        aria-valuemax="100">
    </div>
</div>

<!-- Multicolor gradient -->
<div class="progress-container-dm---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]+mt-[15px]]">
    <div class="progress-bar-dm---[h-[100%]+w-[80%]]
                bg-linear-[90deg,ff1000_0%,rgba(9,9,121,1)_35%,00e4ff_100%]">
    </div>
</div>

Animated bars

Preview
Loading... 
<!-- Progress animation -->
<div class="progress-container-a1---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]]">
    <div class="progress-bar-a1---[h-[100%]+bg-[4285f4]+w-[50%]+transition-[width_0.5s_ease]]"
        role="progressbar"
        aria-valuenow="50"
        aria-valuemin="0"
        aria-valuemax="100">
    </div>
</div>

<!-- Animated strips -->
<div class="progress-container-a2---[w-[100%]+h-[24px]+bg-[darkred]+rounded-[12px]+overflow-[hidden]+mt-[15px]]">
    <div class="progress-bar-a2---[h-[100%]+w-[70%]+pos-[relative]]
                bg-linear-[45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent]
                animation-[stripes_1s_linear_infinite]"
        role="progressbar"
        aria-valuenow="70"
        aria-valuemin="0"
        aria-valuemax="100"
    >
        <span class="progress-text-a2---[pos-[absolute]+left-[10px]+top-[50%]+transform-[translateY(-50%)]+font-size-[12px]+c-[white]]">
            Loading...
        </span>
    </div>
</div>

Advanced Styles

Preview
Progress 60% 
<!-- With shadow and relief -->
<div class="progress-container-or---[w-[100%]+h-[28px]+bg-[e5e7eb]+rounded-[14px]+overflow-[hidden]+shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)]]">
    <div class="progress-bar-or---[h-[100%]+bg-[8b5cf6]+w-[85%]+shadow-[0_2px_8px_rgba(139,92,246,0.4)]]"></div>
</div>

<!-- Progress bar multiple (stacked) -->
<div class="progress-container-bm---[w-[100%]+h-[24px]+bg-[e5e7eb]+rounded-[12px]+overflow-[hidden]+d-[flex]]">
    <div class="progress-bar-bm1---[h-[100%]+bg-[10b981]+w-[30%]]"></div>
    <div class="progress-bar-bm2---[h-[100%]+bg-[0B63F3]+w-[20%]]"></div>
    <div class="progress-bar-bm3---[h-[100%]+bg-[f59e0b]+w-[25%]]"></div>
</div>

<!-- With external label -->
<div class="mb-[8px] d-[flex] justify-[space-between]">
    <span class="font-weight-[600]">Progress</span>
    <span class="c-[6b7280]">60%</span>
</div>
<div class="progress-container-label---[w-[100%]+h-[20px]+bg-[e5e7eb]+rounded-[10px]+overflow-[hidden]]">
    <div class="progress-bar-label---[h-[100%]+bg-[0B63F3]+w-[60%]+transition-[width_0.3s_ease]]"></div>
</div>

<!-- Responsive -->
<div class="progress-container-responsive---[w-[100%]+h-[16px]+md--h-[24px]+lg--h-[32px]+bg-[e5e7eb]+rounded-[8px] md--progress-container-responsive---[rounded-[12px]] lg--progress-container-responsive---[rounded-[16px]+overflow-[hidden]]">
    <div class="progress-bar-responsive---[h-[100%]+bg-[0B63F3]+w-[55%]]"></div>
</div>

Practical examples

Preview
document.pdf 3.2 MB / 5 MB
JavaScript Expert 
<!-- File upload -->
<div class="upload-progress">
    <div class="mb-[12px] d-[flex] justify-[space-between] items-[center]">
        <span class="font-size-[14px] font-weight-[500]">document.pdf</span>
        <span class="font-size-[13px] c-[6b7280]">3.2 MB / 5 MB</span>
    </div>
    <div class="progress-container-upload---[w-[100%]+h-[8px]+bg-[e5e7eb]+rounded-[4px]+overflow-[hidden]]">
        <div class="progress-bar-upload---[h-[100%]+bg-[10b981]+w-[64%]+transition-[width_0.2s_ease]]"></div>
    </div>
</div>

<!-- Skill level -->
<div class="skill-progress mb-[20px]">
    <div class="mb-[8px] d-[flex] justify-[space-between]">
        <span class="font-weight-[600]">JavaScript</span>
        <span class="font-size-[14px] c-[0B63F3]">Expert</span>
    </div>
    <div class="progress-container-skill---[w-[100%]+h-[12px]+bg-[e5e7eb]+rounded-[6px]+overflow-[hidden]]">
        <div class="progress-bar-skill---[h-[100%]+w-[90%]]
                bg-linear-[90deg,0B63F3_0%,8b5cf6_100%]"></div>
    </div>
</div>

<!-- Page loading -->
<div class="progress-container-load---[w-[100%]+h-[4px]+bg-[transparent]+overflow-[hidden]+pos-[fixed]+top-[0]+left-[0]+z-[9999]]">
    <div class="progress-bar-load---[h-[100%]+w-[45%]]
              bg-linear-[90deg,0B63F3_0%,8b5cf6_50%,0B63F3_100%]
              bg-size-[200%_100%]
              animate-[loading_2s_ease-in-out_infinite]"></div>
</div>

Accessibility

Always include ARIA attributes for better accessibility: 

<div class="progress-bar---[...]"
    role="progressbar"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-label="Progression du téléchargement">
</div>

JavaScript (dynamic update) 

// Update progress
function updateProgress(value) {
    const progressBar = document.querySelector('.progress-bar');
    progressBar.style.width = value + '%';
    progressBar.setAttribute('aria-valuenow', value);

    const progressText = progressBar.querySelector('.progress-text');
    if (progressText) {
        progressText.textContent = value + '%';
    }
}

// Example of use
updateProgress(65);
← Previous Carousel
Next → Placeholder

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).