Spinner and Skeleton

Something is on its way. A Spinner says the app is working. A Skeleton holds the place of what's loading, in its shape, so the page doesn't jump when it comes.

<script>
  import { Spinner } from "@elyra/ui";
</script>

<Spinner size="sm" label="Syncing" />
<Spinner />
<Spinner size="lg" label="Loading the invoices" />

label is what a screen reader hears: say what's loading. A busy Button has a spinner of its own (loading).

Skeleton

lines of text, the last one shorter, or one block of a width and height. A loading Table shows skeleton rows.

<script>
  import { Skeleton } from "@elyra/ui";
</script>

<div class="profile">
  <Skeleton width="44px" height="44px" />
  <Skeleton lines={3} />
</div>

<style>
  .profile { display: grid; grid-template-columns: auto 1fr; gap: 14px; width: 100%; max-width: 420px; }
</style>

Accessibility

• A Spinner is a role="status" named by label.
• A Skeleton is hidden from screen readers. Say what's loading somewhere, with a Spinner or aria-busy on what's filling.
• With reduced motion, the spinner turns slower, and the skeleton's shimmer stops.

API

Spinner

Skeleton