spz-loading

When like spz-lightbox need to have their own mask, you can put spz-loading into a box with an id, set the mask-id to the id of the box, and you can use the spz-loading in the box as its own. The spz-loading needs to set role="mask attribute.

<div id="overlay-wrapper">
  <spz-loading layout="container" hidden role="mask"></spz-loading>

  <spz-lightbox layout="nodisplay" id="lightbox" has-mask mask-id="overlay-wrapper">
    <div>
      Content
    </div>
  </spz-lightbox>
</div>

<button type="button" @tap="lightbox.open">Open lightbox</button>

Using a few animations to show the loading. It has the following values:

To show the loading.

To close the loading.