Progress bar

Progress bars are simple non-interactive components that provide visual feedback related to the duration and progression of various processes.

TWIG : Betclic/_common/_twig/_components/_progressbar.twig
CSS : Betclic/_tactics/_common/_css/_components/_progress_bar/_progress_bar.scss
Betclic/_tactics/_common/_css/_components/_progress_bar/_bet_trends.scss
Betclic/_tactics/_common/_css/_components/_progress_bar/_stepper.scss
Angular : <bcdk-progress-bar>
<bcdk-progress-bar-percentage>

Primary link

Default

En cours ...

Alt

En cours ...

Secondary link

Default

Not used for the moment, we can update the color tokens as we want

Alt

Default link

Basic with percentage

30%

Basic with steps

Basic with steps and value

5 / 5

4 / 5

3 / 5

2 / 5

1 / 5

Steps

100%

90%

80%

70%

60%

50%

40%

30%

20%

10%

Steps awaiting

90%

Pari en cours ...

80%

Pari en cours ...

70%

Pari en cours ...

Trends

Alternative link

Steps

100%

90%

80%

70%

60%

50%

40%

30%

20%

10%

Steps awaiting

90%

Pari en cours ...

80%

Pari en cours ...

70%

Pari en cours ...