Progress Bar

The Progress Bar component visually represents the completion status of a task or process. It supports multiple bars, custom colors, animation, and striped effects for dynamic feedback.

Description #

The Progress Bar component is a flexible UI element for displaying progress. It supports:

• Multiple Bars: Stack several progress bars in a single container to show segmented progress.

• Custom Colors & Content: Use utility classes and inline styles for color, text, and alignment.

• Animated & Striped: Add animation and stripes for visual feedback on ongoing processes.

Examples and Classes #

Basic Example

        

            

                
10%
                
10%
                
10%
            
        
        

            
            
HTML
            
        
        <div class="progress">
    <div class="progress-bar" data-progress-percentage="10%">10%</div>
    <div class="progress-bar bg-on-secondary-color txt-small text-color" data-progress-percentage="10%">10%</div>
    <div class="progress-bar" data-progress-percentage="10%">10%</div>
</div>

Content Placement Example

        

            

                
25%
                
50%
                
25%
            
        
        

            
            
HTML
            
        
        <div class="progress">
    <div class="progress-bar" data-progress-percentage="25%" data-progress-content-place="start">25%</div>
    <div class="progress-bar" data-progress-percentage="50%" data-progress-content-place="center">50%</div>
    <div class="progress-bar" data-progress-percentage="25%" data-progress-content-place="end">25%</div>
</div>

Animated Example

        

            

                
25%
                
25%
                
25%
                
25%
            
        
        

            
            
HTML
            
        
        <div class="progress">
    <div class="progress-bar progress-animation bg-danger-regular-color" data-progress-percentage="25%">25%</div>
    <div class="progress-bar progress-animation bg-warning-regular-color" data-progress-percentage="25%" data-progress-duration="1s" data-progress-delay="0.5s">25%</div>
    <div class="progress-bar progress-animation bg-information-regular-color" data-progress-percentage="25%" data-progress-duration="1s" data-progress-delay="0.5s">25%</div>
    <div class="progress-bar progress-animation bg-success-regular-color" data-progress-percentage="25%" data-progress-duration="1s" data-progress-delay="0.5s">25%</div>
</div>

Striped & Animated Example

        

            

                

                

            
        
        

            
            
HTML
            
        
        <div class="progress">
    <div class="progress-bar progress-striped progress-animation-striped progress-animation" data-progress-percentage="50%" data-progress-duration="1s"></div>
    <div class="progress-bar progress-striped progress-animation-striped progress-animation bg-on-secondary-color" data-progress-percentage="50%" data-progress-duration="1s" data-progress-delay="1s"></div>
</div>

Available Classes

Class	Description
.progress	Main wrapper for progress bars. Controls layout and overflow.
.progress-bar	Individual progress bar. Width is set by data-progress-percentage style.
.progress-animation	Animates the bar width from 0 to the target percentage.
.progress-striped	Adds a striped background to the bar.
.progress-animattion-striped	Animates the stripes for a moving effect.

Custom Properties

Property	Description
data-progress-percentage	Sets the width of the progress bar as a percentage (e.g., data-progress-percentage="50%; makes the bar fill 50% of its container).
data-progress-duration	Specifies the duration of the progress bar animation (e.g., data-progress-duration:1s; animates the bar over 1 second).
data-progress-delay	Delays the start of the progress bar animation by the given time (e.g., data-progress-delay:1s; starts the animation after 1 second).

Layout Variations

The progress bar component supports different layout variations:

• Multiple Bars: Stack several bars in one progress container for segmented progress.
• Animated: Use .progress-animation for animated transitions.
• Striped: Use .progress-striped and .progress-animattion-striped for animated stripes.
• Custom Placement: Align content inside bars using data-content-place (start, center, end).

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/progress/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/progress/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/progress/script.js	JavaScript functionality (empty for this component)

SCSS Variables #

        

            
            
SCSS
            
        
        $progress-custom-classes:".radius-all-full, .bg-disabled-light-color";
$progress-bar-custom-classes:".bg-primary-color, .p-1, .txt-small, .secondary-color";
    

JavaScript Implementation #

            

                
JavaScript
            
            class ProgressBar {
    constructor() {
        this.init();
    }

    init() {
        document.querySelectorAll('.progress-bar').forEach(bar => {
            const percentage = bar.dataset.progressPercentage;
            const duration = bar.dataset.progressDuration;
            const delay = bar.dataset.progressDelay;

            if (percentage) {
                bar.style.setProperty('--percentage', percentage);
            }

            if (duration) {
                bar.style.setProperty('--progress-duration', duration);
            }

            if (delay) {
                bar.style.setProperty('--progress-delay', delay);
            }
        });
    }
}

new ProgressBar();