To source

a-loader

A wrapper element to handle loading states for asynchronous content.

The a-loader element manages loading states for its children. It provides a standardised way to show loading indicators and handle loading/loaded transitions.

⏳Loading...

Usage

Basic Usage

The loader shows the loading slot content as long as the loading attribute is set. It also listens to ny "load" events bubbleing up from the content.

<a-loader loading>
  <div slot="loading">
    <span class="spinner"></span>
    Loading...
  </div>
  <div slot="content">
    Your loaded content here
  </div>
</a-loader>

Skeleton Loading Pattern

Use with skeleton placeholders for a smooth loading experience:

<a-loader>
  <div slot="loading" class="space-y-2">
    <div class="h-4 bg-zinc-200 rounded animate-pulse w-3/4"></div>
    <div class="h-4 bg-zinc-200 rounded animate-pulse w-1/2"></div>
    <div class="h-4 bg-zinc-200 rounded animate-pulse w-5/6"></div>
  </div>
  <div slot="content">
    <p>Actual content appears here</p>
  </div>
</a-loader>

Styling

Style the loading and content states with CSS:

a-loader {
  display: block;
  min-height: 100px;
  position: relative;
}

a-loader[loading] [slot="content"] {
  opacity: 0;
  pointer-events: none;
}

a-loader:not([loading]) [slot="loading"] {
  display: none;
}

/* Fade transition */
a-loader [slot="content"] {
  transition: opacity 0.2s ease;
}

LoaderElement

A wrapper element to handle a loading state of its children. Its help with displaying a loading state of dynamic elements. For example, a error state can be displayed to the user, using just css and this element.

Attributes

Name Type Default value Description
delay number 300

The delay in ms, before the loader is shown.
error boolean false

Set, if the child element is in an error state.
loading boolean false

Set, if the child element is currently still loading.

References