> For the complete documentation index, see [llms.txt](https://hinahirani.gitbook.io/ui-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hinahirani.gitbook.io/ui-guide/components/progress-bar.md).

# Progress bar

### Usage

The progress bar component is used to visually represent the completion of a task or operation, for example when waiting for a process to complete. Progress bar can show how much of the task has been completed and how much is still left. It can also show a visual representation of a value in percentages or discrete numbers.

Progress bar can span the full width of the container where it is placed, or can have a specific width. Additional text labels can be set next to the progress bar to better explain the value.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbojUYZvbpE0wJ3dQT%2FProgress%20bar.png?alt=media\&token=8747e2f3-3a69-49fd-bf2a-e9250c7f9d64)

### Behaviour

* Progress bar should consist of the track that shows the total value, and the coloured area that shows current value in the process
* The value of the progress bar is read-only and not directly editable

### Best Practices

* Use the progress bar to show users how much of the task has completed and how much is left
* Use the progress bar to represent the value compared to a total value, in percentage or discrete numbers
* Do not use progress bar for page or content loads; use Loader component instead
* Progress bar can have context-specific colours, just be sure to follow brand colour guidelines when using them

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbonN4dvKIxycpRxV_%2FProgress%20bar%20dos%20and%20don'ts.png?alt=media\&token=acb40a60-fa89-4e45-ba10-a49045ae0adb)

### Style

The progress bar component comes in one size and style, where the colours can be used to accommodate contextual project needs

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbowxWzpu9ym30c1sB%2FProgress%20bar%20style.png?alt=media\&token=52fa6720-e068-4f95-bfbc-b35d50034953)

#### Color Application

Different track and progress colour backgrounds can be applied if it is needed to convey the basic system statuses.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbIP4arkxgkzfhth4r%2F-MAbotaskPK66sQb1xRZ%2FProgress%20bar%20colours.png?alt=media\&token=6fe8c873-b7b3-4d76-a942-ae8dc1ba3b1c)