package.docs.components.progress.mdx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of core Show documentation

Premium and Open Source dashboard template with responsive and high quality UI.

The newest version!

---
title: Progress bars
description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
bootstrapLink: components/progress
---

## Default markup

To create a default progress bar, add a `.progress` class to a `` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.

```html example columns={1} centered

  

```

```html

  
    38% Complete
  

```

## Progress size

Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.

```html code example columns={1} centered

  
    57% Complete
  

```

## Progress without value

Remove the displayed value by adding the `.visually-hidden` class.

```html code example columns={1} centered

  
    75% Complete
  

```

## Indeterminate progress

You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.

```html code example columns={1} centered

  

```

## Native progress element

You can also use native HTML5 `` element.

```html code example columns={1} centered

```

## Progress color

Customize the color of the progress bar to suit your design. Click [here](colors) to see the list of available colors.

```html code example columns={1} centered separated

  
    24% Complete
  


  
    45% Complete
  


  
    64% Complete
  


  
    38% Complete
  

```