Progress bar is a UI component that displays the progress of a task or process using a bar shape, typically by filling in a bar from left to right to visually indicate the progress of a task or process. It is often used to provide feedback to users on the status of a process or the time remaining until completion.

- Basic :

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-position-relative null-flex null-flex-direction-column" style="width:40%">

<span>40%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

You can use ".null-background-color" in the element that has null-progress-bar to change the background: 

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-background-green null-position-relative null-flex null-flex-direction-column" style="width:40%">
                            
<span>80%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-background-red null-position-relative null-flex null-flex-direction-column" style="width:40%">
                            
<span>10%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-background-yellow null-position-relative null-flex null-flex-direction-column" style="width:60%">
                           
 <span>60%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

- Indicator Message: 

Just add class ".null-progress-bar-message" to the span.

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-position-relative null-flex null-flex-direction-column" style="width:40%">

<span class="null-progress-bar-message">40%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

You can use ".null-background-color" in the element that has ".null-progress-bar" class to change the background: 

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-background-green null-position-relative null-flex null-flex-direction-column" style="width:80%">

<span class="null-progress-bar-message">80%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

Add another span ,if you want to show the indicator on the progress bar too!

<div class="null-progress-bar-container null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-background-green null-position-relative null-flex null-flex-direction-column" style="width:80%">

<span class="null-progress-bar-message">80%</span>
<span>80%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->

To reduce the size of the progress bar, you can adding the CSS class ".null-progress-bar-small" to the element that has ".null-progress-bar-container" class.

<div class="null-progress-bar-container null-progress-bar-small null-display-flex null-font-size-15 null-border-radius">

<div class="null-progress-bar null-background-green null-position-relative null-flex null-flex-direction-column" style="width:80%">

<span class="null-progress-bar-message">80%</span>

</div><!--End null-progress-bar-->

</div><!--End null-progress-bar-container-->