Progress

Stackable progress bars, animated backdrops, and text labels are all supported by UX4G's custom progress bars, which are documented and used in examples.

How it works #

Two HTML elements, some CSS to define the width, and a few attributes are used to construct Progress components. You may stack progress bars, animate them, and overlay text labels because there is no use of the HTML5 <progress> element.

To provide the maximum value of the progress bar, we use the .progress wrapper.
The inner .progress-bar serves as our current progress indicator.
The width of the .progress-bar must be set using an inline style, utility class, or custom CSS.
To be accessible, the .progress-bar also needs certain role and aria attributes.

Put that all together, and you have the following examples.


<div class="d-flex gap-3 justify-content-between align-items-center mb-15">
        <div class="progress w-100">
            <div class="progress-bar" style="width:0%" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <span>0%</span>
      </div>

      <div class="d-flex gap-3 justify-content-between align-items-center mb-15">
        <div class="progress w-100">
            <div class="progress-bar" style="width:25%" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <span>25%</span>
      </div>

      <div class="d-flex gap-3 justify-content-between align-items-center mb-15">
        <div class="progress w-100">
            <div class="progress-bar" style="width:50%" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <span>50%</span>
      </div>
      
      <div class="d-flex gap-3 justify-content-between align-items-center mb-15">
        <div class="progress w-100">
            <div class="progress-bar" style="width:75%" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <span>75%</span>
      </div>

      <div class="d-flex gap-3 justify-content-between align-items-center mb-15">
        <div class="progress w-100">
            <div class="progress-bar" style="width:100%" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <span>100%</span>
      </div>

RESULT

25%

50%

75%

100%

UX4G Provide circle progressbar you can increase the percentage value through inline css in this variable percent: 40

        
        <div class="progress-circle-card lg-progress-circle">
    <div class="percent">
        <svg>
            <circle cx="140" cy="140" r="122" style="--circumference: 766.99px;"></circle>
            <circle cx="140" cy="140" r="122" style="--percent: 40; --circumference: 766.99px;"></circle>
        </svg>
        <div class="number">
            <span class="text-gray-600">Uploading</span>
            <h3 class="m-0">40%</h3>
        </div>
    </div>
</div>

<div class="progress-circle-card md-progress-circle">
    <div class="percent">
        <svg>
            <circle cx="120" cy="120" r="105" style="--circumference: 660.52px;"></circle>
            <circle cx="120" cy="120" r="105" style="--percent: 40; --circumference: 660.52px;"></circle>
        </svg>
        <div class="number">
            <span class="text-gray-600">Uploading</span>
            <h3 class="m-0">40%</h3>
        </div>
    </div>
</div>

<div class="progress-circle-card sm-progress-circle">
    <div class="percent">
        <svg>
            <circle cx="100" cy="100" r="87" style="--circumference: 546.36px;"></circle>
            <circle cx="100" cy="100" r="87" style="--percent: 40; --circumference: 546.36px;"></circle>
        </svg>
        <div class="number">
            <span class="text-gray-600">Uploading</span>
            <h3 class="m-0">40%</h3>
        </div>
    </div>
</div>

<div class="progress-circle-card xs-progress-circle">
    <div class="percent">
        <svg>
            <circle cx="80" cy="80" r="70" style="--circumference: 439.82px;"></circle>
            <circle cx="80" cy="80" r="70" style="--percent: 40; --circumference: 439.82px;"></circle>
        </svg>
        <div class="number">
            <span class="text-gray-600">Uploading</span>
            <h3 class="m-0">40%</h3>
        </div>
    </div>
</div>

<div class="progress-circle-card xxs-progress-circle text-center">
    <div class="percent">
        <svg>
            <circle cx="32" cy="32" r="27" style="--circumference: 169.65px;"></circle>
            <circle cx="32" cy="32" r="27" style="--percent: 40; --circumference: 169.65px;"></circle>
        </svg>
        <div class="number">
            <h3 class="m-0">40%</h3>
        </div>
    </div>
    <span class="fs-12 text-gray-600">Users</span>
</div>

RESULT

Uploading

40%

Uploading

40%

Uploading

40%

Uploading

40%

Users

UX4G Provide circle half progressbar you can increase the percentage value 40 change and add this js for animation and increase the circle bar

        
$(".progress-circle-half").each(function(){
  
  var $bar = $(this).find(".bar-circle-half");
  var $val = $(this).find("span");
  var perc = parseInt( $val.text(), 10);

  $({p:0}).animate({p:perc}, {
    duration: 3000,
    easing: "swing",
    step: function(p) {
      $bar.css({
        transform: "rotate("+ (45+(p*1.8)) +"deg)", 
      });
      $val.text(p|0);
    }
  });
});

        
<div class="progress-circle-half">
    <div class="barOverflow-circle-half lg-progress-circle-half" style="margin-bottom: -75px;">
        <div class="bar-circle-half"></div>
    </div>
    <div class="circle-half-number lg-circle-half-number position-relative z-1">
        <label class="d-block text-gray-600">Uploading</label>
        <div class="num"><span>50</span>%</div>
    </div>
</div>

<div class="progress-circle-half">
    <div class="barOverflow-circle-half md-progress-circle-half" style="margin-bottom: -50px;">
        <div class="bar-circle-half"></div>
    </div>
    <div class="circle-half-number md-circle-half-number position-relative z-1">
        <label class="d-block text-gray-600">Uploading</label>
        <div class="num"><span>100</span>%</div>
    </div>
</div>

<div class="progress-circle-half">
    <div class="barOverflow-circle-half sm-progress-circle-half" style="margin-bottom: -25px;">
        <div class="bar-circle-half"></div>
    </div>
    <div class="circle-half-number sm-circle-half-number position-relative z-1">
        <label class="d-block text-gray-600">Uploading</label>
        <div class="num"><span>34</span>%</div>
    </div>
</div>

<div class="progress-circle-half">
    <div class="barOverflow-circle-half xs-progress-circle-half" style="margin-bottom: -20px;">
        <div class="bar-circle-half"></div>
    </div>
    <div class="circle-half-number xs-circle-half-number position-relative z-1">
        <label class="d-block text-gray-600">Uploading</label>
        <div class="num"><span>56</span>%</div>
    </div>
</div>

<div class="progress-circle-half">
    <div class="barOverflow-circle-half xxs-progress-circle-half">
        <div class="bar-circle-half"></div>
    </div>
    <div class="circle-half-number xxs-circle-half-number position-relative z-1">
        <label class="d-block text-gray-600">Uploading</label>
        <div class="num"><span>80</span>%</div>
    </div>
</div>

RESULT

Uploading

50%

Uploading

100%

Uploading

34%

Uploading

56%

Uploading

80%

UX4G provides a handful of utilities for setting width Sizing. Depending on your needs, these may help with quickly configuring progress.

                                                                
<div class="d-flex gap-3 justify-content-between align-items-center mb-15">
    <div class="progress w-100">
        <div class="progress-bar" style="width: 75%;" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span>75%</span>
</div>

RESULT

75%

Labels #

Add labels to your progress bars by placing text within the .progress-bar.

<div class="d-flex gap-3 justify-content-between align-items-center mb-15">
    <div class="progress w-100">
        <div class="progress-bar" style="width: 25%;" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span>25%</span>
</div>

RESULT

25%

Height #

The inner .progress-bar will automatically adjust to fit if developers modify the height value because of only putting a height value on the .progress.

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

RESULT

Backgrounds #

Use background utility classes to change the appearance of individual progress bars.

<div class="progress mb-15">
        <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
      </div>
      <div class="progress mb-15">
        <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
      </div>
      <div class="progress mb-15">
        <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
      </div>
      <div class="progress mb-15">
        <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
      </div>

RESULT

Conveying meaning to assistive technologies

Color-coding to add meaning just gives a visual cue, which users of assistive technologies like screen readers won't be able to understand. Make sure the information the color designates is either evident from the content itself (such as the visible text) or is included in another way, such as by hiding additional text using the .visually-hidden class.

Multiple bars #

Include multiple progress bars in a progress component if you need.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style={{width:15 + '%'}} aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style={{width:30 + '%'}} aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style={{width:20 + '%'}} aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

RESULT

Striped #

To create a stripe using CSS gradient over the progress bar's background color, add the class .progress-bar-striped to any .progress-bar.

<div class="progress mb-15">
        <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;"></div>
      </div>

      <div class="progress mb-15">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
      </div>

      <div class="progress mb-15">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
      </div>

      <div class="progress mb-15">
        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
      </div>

      <div class="progress mb-15">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
      </div>

RESULT

Animated stripes #

The gradient of stripes can also be animated. To use CSS3 animations to animate the stripes from right to left, add .progress-bar-animated to .progress-bar.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style={{width:75 + '%'}}></div>
</div>

RESULT

CSS #

Variables #

Added in v1.0.2

Progress bars now employ local CSS variables on .progress as part of UX4G's expanding approach to CSS variables for improved real-time customization. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass variables #

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Keyframes #

Used for creating the CSS animations for .progress-bar-animated. Included in scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}

How it works
Labels
Height
Backgrounds
Multiple bars
Striped
Animated stripes
CSS
- Variables
Sass variables
Keyframes

Demo

Demo

Previous « Popovers

Next Scrollspy »

Progress

How it works #

RESULT

RESULT

40%

40%

40%

40%

40%

RESULT

RESULT

Labels #

RESULT

Height #

RESULT

Backgrounds #

RESULT

Conveying meaning to assistive technologies

Multiple bars #

RESULT

Striped #

RESULT

Animated stripes #

RESULT

CSS #

Variables #

Sass variables #

Keyframes #

Accessibility options