Government of
India
Powered by NeGD | MeitY Government of India® UX4G
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="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>RESULT
UX4G provides a handful of utilities for setting width Sizing. Depending on your needs, these may help with quickly configuring progress.
<div class="progress"><div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div></div>
RESULT
Labels #
Add labels to your progress bars by placing
text within the .progress-bar.
<div class="progress"><div class="progress-bar" role="progressbar" aria-label="Example with label" style={{width:25 + '%'}} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div></div>
RESULT
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">
<div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>RESULT
Conveying meaning to assistive technologies
Color-codingto 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">
<div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="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.1
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; }
}
}
