Progress Bar

Migrating the Progress Bar Component

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

 1<div class="progress">
 2  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
 3</div>
 4<div class="progress">
 5  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 6</div>
 7<div class="progress">
 8  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
 9</div>
10<div class="progress">
11  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
12</div>
13<div class="progress">
14  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
15</div>

PUIK

Basic Use

For any progress bar component that you use, replace the structure above with the following structure:

1<div class="progress-bar__container">
2  <div class="progress-bar__content" style="width: 50%;"></div>
3</div>

Percentage

You can set the progression by changing the width of the element with the class progress-bar__content:

 1<div class="progress-bar__container">
 2  <div class="progress-bar__content" style="width: 0%;"></div>
 3</div>
 4
 5<div class="progress-bar__container">
 6  <div class="progress-bar__content" style="width: 25%;"></div>
 7</div>
 8
 9<div class="progress-bar__container">
10  <div class="progress-bar__content" style="width: 50%;"></div>
11</div>
12
13<div class="progress-bar__container">
14  <div class="progress-bar__content" style="width: 100%;"></div>
15</div>
← Modal
Radio →