@mwcz/pbp-loading v1.0.2

pbp-loading

A bare-bones, square-ish, loading bar. Web Component.

Attributes

Only defaults

<pbp-loading></pbp-loading>

Set the number of boxes in the loading bar

<pbp-loading box-count=10></pbp-loading>

Set the duration, in seconds, of all the squares pulsing

<pbp-loading duration=1></pbp-loading>

Start paused, ie: don't automatically start the animation

Note: adding this attribute later does not pause the animation, but .pause() does.

<pbp-loading paused></pbp-loading>

CSS

<style>
pbp-loading {
  --pbp-loading-box-size: 30px; /* change the box size */
  --pbp-loading-border: 2px dotted rebeccapurple; /* change the border on the boxes */
  --pbp-loading-gap: 0px; /* change the grid-gap between boxes */
  --pbp-loading-grow: 400%; /* how big the boxes grow */
}
</style>
<pbp-loading></pbp-loading>

JS

This element has two methods, play() and pause().