Loading

Wraps any content and turns it into its own shimmering skeleton while loading is true. The component applies a transparent text + animated gradient background to every descendant, so the placeholder naturally follows the shape of whatever children you pass — headings, paragraphs, buttons, avatars, cards.

The technique uses color: transparent, a horizontally animated linear-gradient and -webkit-box-decoration-break: clone so multi-line text shimmers per line.

While loading, the root element receives aria-busy="true", aria-live="polite" and inert, so keyboard focus cannot land inside the skeleton.

Which variant, and when

Two loading semantics, picked with the variant prop:

skeleton (default) — you don’t have the content yet. Every descendant is replaced with shimmer so the user sees the shape of what’s loading. Reach for this on first render, after a navigation, or when the content structure is known but the data isn’t.
busy — you already have the content, but an action is in flight (saving a form, refreshing a feed, running a search). Children stay legible and simply blur with a gentle opacity pulse. Users keep their context, they just can’t interact until it resolves.

Rule of thumb: if the user has never seen this content before, use skeleton. If they’re waiting for the same content to update, use busy.

Picking the wrapper element

Loading renders its root with display: contents, so the wrapper disappears from layout and the children sit directly in their natural flow. Wrap at the granularity you want the loading state to cover:

Wrapping a single card gives you a card-level skeleton.
Wrapping a list wrapper gives you a list-level skeleton — each row already composes into its own shape.
Wrapping a form lets you show busy across the whole form including its submit button.

Per-child overrides

For the rare mixed cases, drop data-loading-as on any descendant to change the treatment locally:

data-loading-as="skeleton" — force skeleton on this subtree even if the ancestor is busy (e.g. a stat number that’s still being computed while the rest of the form blurs).
data-loading-as="busy" — force busy on this subtree inside a skeleton (e.g. a persistent “Saving…” button that stays readable).
data-loading-as="none" — opt a subtree out entirely (e.g. a progress bar or spinner that drives the loading state itself).

Component-specific behaviour

The recipe recognises Pindoba components via their data-component attribute and gives each the right treatment:

Badge, Stamp, Checkbox, Radio — shimmered as atomic blocks so their pill / circle / square shape is preserved; inner text and icons are hidden.
Button — in skeleton the whole button becomes a shimmer block (no label); in busy the button keeps its label but blurs and pulses.
Input, Select, Textarea — the padded wrapper shimmers edge-to-edge and the inner control + placeholder are hidden, so no stray placeholder text leaks through.
Card, Alert, Banner, and regular text nodes — follow the generic leaf shimmer, so their internal spans and paragraphs animate line-by-line.

Accessibility

The root receives aria-busy="true", aria-live="polite" and inert while loading, so assistive tech is notified and keyboard focus can’t land inside a placeholder. The shimmer and pulse animations respect prefers-reduced-motion and collapse to a static state.

Default

Toggle the loading state — the same markup serves as both the real content and its skeleton. Wrapping text in a <span> lets each wrapped line shimmer individually.

Astro Svelte React TODO

Preview Code

Loading Variant

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.

Loading Variant

Lorem ipsum dolor sit amet

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident.

<script lang="ts">
  import Loading from "../Loading.svelte";
  import Checkbox from "@pindoba/svelte-checkbox";
  import Select from "@pindoba/svelte-select";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let loading = $state(true);
  let variant = $state<"skeleton" | "busy">("skeleton");
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", align: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-default-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", align: "center" })}>
      <span>Variant</span>
      <Select items={variants} bind:value={variant} />
    </label>
  </div>

  <Loading {loading} {variant}>
    <article>
      <h3 class={css({ fontSize: "xl", fontWeight: "bold", mb: "sm" })}>
        Lorem ipsum dolor sit amet
      </h3>
      <p class={css({ mb: "sm" })}>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </span>
      </p>
      <p>
        <span>
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non
          proident.
        </span>
      </p>
    </article>
  </Loading>
</div>

Card

A profile card composed of Card, Badge and Button. Everything inside the card becomes a skeleton without any extra markup.

Astro Svelte React TODO

Preview Code

Loading Variant

Analytical Engine

Ada Lovelace · 1843

Research Published

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

Loading Variant

Analytical Engine

Ada Lovelace · 1843

Research Published

The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform.

<script lang="ts">
  import Loading from "../Loading.svelte";
  import Card from "@pindoba/svelte-card";
  import Button from "@pindoba/svelte-button";
  import Badge from "@pindoba/svelte-badge";
  import Checkbox from "@pindoba/svelte-checkbox";
  import Select from "@pindoba/svelte-select";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  let loading = $state(true);
  let variant = $state<"skeleton" | "busy">("skeleton");
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", align: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-card-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", align: "center" })}>
      <span>Variant</span>
      <Select items={variants} bind:value={variant} />
    </label>
  </div>

  <Loading {loading} {variant}>
    <Card
      header={{
        heading: "Analytical Engine",
        subheading: "Ada Lovelace · 1843",
      }}
    >
      <div class={stack({ gap: "md", direction: "column" })}>
        <div class={hstack({ gap: "xs", flexWrap: "wrap" })}>
          <Badge feedback="primary">Research</Badge>
          <Badge feedback="success">Published</Badge>
        </div>
        <p class={css({ margin: "0" })}>
          The Analytical Engine has no pretensions whatever to originate
          anything. It can do whatever we know how to order it to perform.
        </p>
        <div class={hstack({ gap: "sm" })}>
          <Button emphasis="primary">Read more</Button>
          <Button emphasis="ghost">Share</Button>
        </div>
      </div>
    </Card>
  </Loading>
</div>

Loading works seamlessly over messaging components like Banner and Alert — icons are hidden while their containing boxes still shimmer.

Astro Svelte React TODO

Preview Code

Loading Variant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

Loading Variant

Workspace usage

You have used 62% of your monthly quota.

Your profile changes were saved successfully and published to the team.

Billing cycle ends in 3 days. Review your plan before renewal.

<script lang="ts">
  import Loading from "../Loading.svelte";
  import Banner from "@pindoba/svelte-banner";
  import Alert from "@pindoba/svelte-alert";
  import Checkbox from "@pindoba/svelte-checkbox";
  import Select from "@pindoba/svelte-select";
  import { stack, hstack } from "@pindoba/styled-system/patterns";

  let loading = $state(true);
  let variant = $state<"skeleton" | "busy">("skeleton");
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", align: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-banner-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", align: "center" })}>
      <span>Variant</span>
      <Select items={variants} bind:value={variant} />
    </label>
  </div>

  <Loading {loading} {variant}>
    <div class={stack({ gap: "md", direction: "column" })}>
      <Banner
        heading="Workspace usage"
        subheading="You have used 62% of your monthly quota."
      />
      <Alert feedback="success">
        Your profile changes were saved successfully and published to the team.
      </Alert>
      <Alert feedback="warning">
        Billing cycle ends in 3 days. Review your plan before renewal.
      </Alert>
    </div>
  </Loading>
</div>

Form

Skeletonize form fields (Input, Select) and their submit actions to indicate a pending save or fetch.

Astro Svelte React TODO

Preview Code

Loading Variant

<script lang="ts">
  import Loading from "../Loading.svelte";
  import Input from "@pindoba/svelte-input";
  import Select from "@pindoba/svelte-select";
  import Button from "@pindoba/svelte-button";
  import Checkbox from "@pindoba/svelte-checkbox";
  import { stack, hstack } from "@pindoba/styled-system/patterns";

  let loading = $state(true);
  let variant = $state<"skeleton" | "busy">("skeleton");
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];

  const countries = [
    { label: "Brazil", value: "br" },
    { label: "Portugal", value: "pt" },
    { label: "United States", value: "us" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <div class={hstack({ gap: "md", align: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-form-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", align: "center" })}>
      <span>Variant</span>
      <Select items={variants} bind:value={variant} />
    </label>
  </div>

  <Loading {loading} {variant}>
    <form class={stack({ gap: "md", direction: "column" })}>
      <Input placeholder="Full name" />
      <Input placeholder="Email" type="email" />
      <Select items={countries} />
      <div class={hstack({ gap: "sm" })}>
        <Button emphasis="primary" type="submit">Create account</Button>
        <Button emphasis="ghost" type="button">Cancel</Button>
      </div>
    </form>
  </Loading>
</div>

Feed

A feed layout with Stamp avatars, Badge tags and Button actions. Each post becomes its own composed skeleton.

Astro Svelte React TODO

Preview Code

Loading Variant

Grace Hopper @amazing_grace · 2h Mentor Pioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing @enigma · 5h Author
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace @countess_of_code · 1d Founder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

Loading Variant

Grace Hopper @amazing_grace · 2h Mentor Pioneer
Rear Admiral · US Navy
The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.
Alan Turing @enigma · 5h Author
Mathematician · Bletchley Park
Sometimes it is the people no one can imagine anything of who do the things no one can imagine.
Ada Lovelace @countess_of_code · 1d Founder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

<script lang="ts">
  import Loading from "../Loading.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import Badge from "@pindoba/svelte-badge";
  import Button from "@pindoba/svelte-button";
  import Checkbox from "@pindoba/svelte-checkbox";
  import SelectComp from "@pindoba/svelte-select";
  import LucideUser from "lucide-svelte/icons/user";
  import LucideHeart from "lucide-svelte/icons/heart";
  import LucideMessageCircle from "lucide-svelte/icons/message-circle";
  import LucideRepeat from "lucide-svelte/icons/repeat-2";
  import LucideShare from "lucide-svelte/icons/share";
  import { stack, hstack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";

  const posts = [
    {
      name: "Grace Hopper",
      handle: "@amazing_grace",
      role: "Rear Admiral · US Navy",
      tags: ["Mentor", "Pioneer"],
      time: "2h",
      text: "The most damaging phrase in the language is 'we've always done it this way'. Question everything — especially the defaults.",
      likes: "1.2k",
      replies: "84",
      reposts: "312",
    },
    {
      name: "Alan Turing",
      handle: "@enigma",
      role: "Mathematician · Bletchley Park",
      tags: ["Author"],
      time: "5h",
      text: "Sometimes it is the people no one can imagine anything of who do the things no one can imagine.",
      likes: "892",
      replies: "47",
      reposts: "156",
    },
    {
      name: "Ada Lovelace",
      handle: "@countess_of_code",
      role: "Analyst · Analytical Engine",
      tags: ["Founder"],
      time: "1d",
      text: "The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.",
      likes: "2.4k",
      replies: "128",
      reposts: "498",
    },
  ];

  let loading = $state(true);
  let variant = $state<"skeleton" | "busy">("skeleton");
  const variants = [
    { id: "skeleton", label: "Skeleton", value: "skeleton" },
    { id: "busy", label: "Busy", value: "busy" },
  ];
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "xl" })}>
  <div class={hstack({ gap: "md", align: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-feed-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", align: "center" })}>
      <span>Variant</span>
      <SelectComp items={variants} bind:value={variant} />
    </label>
  </div>

  <Loading {loading} {variant}>
    <ul
      class={stack({
        gap: "lg",
        direction: "column",
        listStyle: "none",
        padding: "0",
        margin: "0",
      })}
    >
      {#each posts as post (post.handle)}
        <li class={hstack({ gap: "md", align: "flex-start" })}>
          <Stamp shape="circle"><LucideUser /></Stamp>
          <div class={stack({ gap: "sm", direction: "column", flex: "1" })}>
            <div
              class={hstack({ gap: "sm", align: "center", flexWrap: "wrap" })}
            >
              <strong>{post.name}</strong>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                {post.handle}
              </span>
              <span
                class={css({ color: "neutral.text.muted", fontSize: "sm" })}
              >
                · {post.time}
              </span>
              {#each post.tags as tag (tag)}
                <Badge feedback="primary" size="sm">{tag}</Badge>
              {/each}
            </div>
            <span class={css({ color: "neutral.text.muted", fontSize: "sm" })}>
              {post.role}
            </span>
            <p class={css({ margin: "0", lineHeight: "1.5" })}>
              <span>{post.text}</span>
            </p>
            <div
              class={hstack({
                gap: "lg",
                color: "neutral.text.muted",
                fontSize: "sm",
              })}
            >
              <Button emphasis="ghost" size="sm">
                <LucideMessageCircle />
                <span>{post.replies}</span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <LucideRepeat />
                <span>{post.reposts}</span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <LucideHeart />
                <span>{post.likes}</span>
              </Button>
              <Button emphasis="ghost" size="sm">
                <LucideShare />
              </Button>
            </div>
          </div>
        </li>
      {/each}
    </ul>
  </Loading>
</div>

Props

props · 8 total

prop	type	default	description
loading	boolean	false	When true, renders children as a shimmering skeleton.
variant	"skeleton""busy"	"skeleton"	Loading treatment. `skeleton` replaces content with shimmer. `busy` blurs + pulses the existing content.
speed	"slow""normal""fast"	"normal"	Shimmer animation speed.
radius	"sm""md""pill"	"sm"	Border radius applied to each shimmering descendant.
colorPalette	string	"neutral"	Tints the skeleton shimmer using any palette token.
passThrough	{ root?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> } }	undefined	Custom styling and props for the loading root element.
children	Snippet	undefined	Content rendered normally, or as a skeleton when loading.
...rest	HTMLAttributes<HTMLDivElement>	-	Standard HTML div attributes.

Navigation

Components

Blocks

Components

Blocks

Loading

Which variant, and when

Picking the wrapper element

Per-child overrides

Component-specific behaviour

Accessibility

Default

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Card

Analytical Engine

Analytical Engine

Banner & Alerts

Workspace usage

Workspace usage

Form

Feed

Props

Components

Blocks

#Which variant, and when

#Picking the wrapper element

#Per-child overrides

#Component-specific behaviour

#Accessibility

#Default

Lorem ipsum dolor sit amet

#Card

Analytical Engine

#Banner & Alerts

Workspace usage

#Form

#Feed

#Props

Which variant, and when

Picking the wrapper element

Per-child overrides

Component-specific behaviour

Accessibility

Default

Card

Banner & Alerts

Form

Feed

Props