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" style="--percentage:10%">10%</div>
    <div class="progress-bar bg-secondary-color txt-small on-primary-color" style="--percentage:10%">10%</div>
    <div class="progress-bar" style="--percentage:10%">10%</div>
</div>

Content Placement Example

        

            

                
25%
                
50%
                
25%
            
        
        

            
            
HTML
            
        
        <div class="progress">
    <div class="progress-bar" style="--percentage:25%; --content-place:start">25%</div>
    <div class="progress-bar" style="--percentage:50%; --content-place:center">50%</div>
    <div class="progress-bar" style="--percentage:25%; --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" style="--percentage:25%;">25%</div>
    <div class="progress-bar progress-animation bg-warning-regular-color" style="--percentage:25%;--progress-animation-duration:1s;--progress-animation-delay:0.5s;">25%</div>
    <div class="progress-bar progress-animation bg-information-regular-color" style="--percentage:25%;--progress-animation-duration:1s;--progress-animation-delay:0.5s;">25%</div>
    <div class="progress-bar progress-animation bg-success-regular-color" style="--percentage:25%;--progress-animation-duration:1s;--progress-animation-delay:0.5s;">25%</div>
</div>

Striped & Animated Example

        

            

                

                

            
        
        

            
            
HTML
            
        
        <div class="progress">
    <div class="progress-bar progress-striped progress-animattion-striped progress-animation" style="--percentage:50%;--progress-animation-duration:1s;"></div>
    <div class="progress-bar progress-striped progress-animattion-striped progress-animation bg-secondary-color" style="--percentage:50%;--progress-animation-duration:1s;--progress-animation-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 --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
--percentage	Sets the width of the progress bar as a percentage (e.g., --percentage:50%; makes the bar fill 50% of its container).
--progress-animation-duration	Specifies the duration of the progress bar animation (e.g., --progress-animation-duration:1s; animates the bar over 1 second).
--progress-animation-delay	Delays the start of the progress bar animation by the given time (e.g., --progress-animation-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 --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-bg-color: "disabled-light";
$progress-custom-classes: ".w-100, .d-flex, .flex-row, .radius-all-full, .overflow-hidden";
$progress-bar-custom-classes: ".d-flex, .align-items-center, .justify-content-center, .overflow-hidden";
$progress-bar-default-bg-color: "information-regular";
$progress-bar-default-font-size: 12px;
$progress-bar-default-padding: ".p-1";

    

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
progress-bar	CSS/HTML	No JavaScript logic is required for the progress bar. All animations and effects are handled via CSS and custom properties.