Spinner Loader

Sources

PrestaShop UIKit

Original bootstrap component used in the PrestaShop UIKit:

 1<div class="spinner"></div>
 2
 3<div class="spinner spinner-primary"></div>
 4
 5<div class="spinner spinner-secondary"></div>
 6
 7<div class="spinner spinner-success"></div>
 8
 9<div class="spinner spinner-danger"></div>
10
11<div class="spinner spinner-warning"></div>

PUIK

Basic Use

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

1<div
2  class="puik-spinner-loader"
3  aria-live="polite"
4  role="status"
5>
6  <div class="puik-spinner-loader__spinner" aria-hidden="true"></div>
7</div>

Color

The following spinner loader colors are available:

  • primary (default)
  • reverse

To use any of these colors, add the puik-spinner-loader--${color} class to the spinner loader:

1<div
2  class="puik-spinner-loader puik-spinner-loader--${color}"
3  aria-live="polite"
4  role="status"
5>
6  <div class="puik-spinner-loader__spinner" aria-hidden="true"></div>
7</div>

Size

Different sizes are available for each spinner loader:

  • sm (small)
  • md (medium - default)
  • lg (large)

To use any of these sizes, add the puik-spinner-loader--${size} class to the spinner loader:

1<div
2  class="puik-spinner-loader puik-spinner-loader--${size}"
3  aria-live="polite"
4  role="status"
5>
6  <div class="puik-spinner-loader__spinner" aria-hidden="true"></div>
7</div>

Example: Small Spinner Loader 

1<div
2  class="puik-spinner-loader puik-spinner-loader--sm"
3  aria-live="polite"
4  role="status"
5>
6  <div class="puik-spinner-loader__spinner" aria-hidden="true"></div>
7  <span class="puik-spinner-loader__label">Small</span>
8</div>

Position

The following spinner loader position are available:

  • bottom (default)
  • right

To use any of these position, add the puik-spinner-loader--${position} class to the spinner loader:

1<div
2  class="puik-spinner-loader puik-spinner-loader--${position}"
3  aria-live="polite"
4  role="status"
5>
6  <div class="puik-spinner-loader__spinner" aria-hidden="true"></div>
7  <span class="puik-spinner-loader__label">In progress</span>
8</div>
info
If you don’t put a label in a div with class puik-spinner-loader__label, the position will have no effect on the spinner loader

Example: Right label Spinner Loader 

1<div
2  class="puik-spinner-loader puik-spinner-loader--right"
3  aria-live="polite"
4  role="status"
5>
6  <div class="puik-spinner-loader__spinner" aria-hidden="true"></div>
7  <span class="puik-spinner-loader__label">In progress</span>
8</div>
← Snackbar
Switch →