SkeletonLoader

Sources

PUIK

Basic Use

For any accordion component that you use, replace the structure above with the following structures.

1<div class="puik-skeleton-loader-group" aria-label="Loading" aria-live="polite" role="status">
2  <div class="puik-card puik-card--default w-full max-w-max">
3    <div class="puik-skeleton-loader material-icons-round puik-skeleton-loader--image"></div>
4    <div class="puik-skeleton-loader material-icons-round puik-skeleton-loader--h3"></div>
5    <div class="puik-skeleton-loader material-icons-round puik-skeleton-loader--jumbotron"></div>
6  </div>
7</div>

Each skeleton loader element .puik-skeleton-loader must be wrapped in a container .puik-skeleton-loader-group with accessibility feature which indicate the loading status.

The following element variants are available:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • jumbotron
  • mega-jumbotron
  • text-small
  • text-medium
  • text-large
  • badge
  • tag
  • image
  • graph
  • video

To use one, the element must have the class puik-skeleton-loader puik-skeleton-loader--{variants}.

← Select
Snackbar →