---
# System prepended metadata

title: Progress & usage bar

---

---
tags: 
---

# Progress & usage bar
https://designsystem.proximus.com/pagesDS/20__Components/Progress_bar/

Progress bar is a graphical control element used to visualize the progression of an extended operation

## Usage
### Types
Explain why there are several types

![](https://i.imgur.com/6oJ85QE.png)




**1.Normal progress bar**
Show in a unique color, Progress indicators look and animate in ways that reflect the status of a process.
**2.Progress bar with inception 2 colours**
Same issue then the normal progress bar but inception with 2 colours.
**3.Usage bar**
Depending on the state of the progress bar, they will be show in different color at the different state

### States

![](https://i.imgur.com/Pt0SLPs.png)


1. Basic
They are two basic state, can be show in progress bar or in the usage bar.Linear progress indicators They can’t be clickable and don’t have focus state or hover state.
### Anatomy

![](https://i.imgur.com/KE6KyPp.png)

**1. Primary label (optional)**
Depanding of 
**2. indicator label (optional)**
Linear progress indicators operations display the indicator increasing in width from 0 to 100% of the track, in sync with the process’s progress.
**3. Indicator**
The indicator animates along the length of the track.
**4. Track**
 The track is a fixed width rule, with set boundaries for the indicator to travel along.
**5. secondary label (optional)**
Show the among data-credit was use
**6. Secondary label (optional)**
    Total of data could be use for the user




## Style

Size

![](https://i.imgur.com/8SFiHD9.png)


|  | Mobile | Desktop |
| -------- | -------- | -------- |
| 1. Primary label     | 1 rem     | 2 rem     |
| 2. Track |1 rem |2 rem|
| 3. Indicator|1 rem |2 rem|
| 4. label | 0.7 rem |1.4rem |
| 5. Secondary label| 0.65 rem <br> bold|1.6 rem <br> bold|
| 6. Secondary label | 0.75 rem |1.4 rem |



Color

![](https://i.imgur.com/R6LKmgi.png)



| Types | Attribute | Container |
| -------- | -------- | -------- |
| All type of progress bar     | Track color <br> Shadow indicator <br> label | linear gradient #F4F4F4 to #E6E6E7  <br> X=3 Y=0 B=5 <br> White |
|1.Indicator | Color| Purple|
|2.Indicator | Color  | warning |
|3.Indicator | Color  |purple 50% <br> blue 50%|
|4.Indicator | Color  |purple 50% <br> dark blue 50%|
|5.Indicator | Color  |purple 50% <br> turquoise 50%|
|6.Indicator | Color  |purple 50% <br> green 50%|
|7.Indicator | Color  |purple 50% <br> yellow 50%|
|8.Indicator | Color  |purple 50% <br> orange 50%|
|9.Indicator | Color  |purple 50% <br> red 50%|
|10.Indicator | Color  |purple 50% <br> magenta 50%|
|11.Indicator | Color  |purple 50% <br> grey 50%|
|12.Indicator | Color  |purple 50% <br> almond 50%|
|13.low usage indicator | Color  |success|
|14.High usage indicator | Color  |warning|
|15.over usage indicator | Color  |error|
|16.Secondary label | Color-font  |purple|
|17.secondary label | Color-font  |body text|

