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.

AstroReactSvelteVue

PreviewCode

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.

LoadingVariant

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.

import { useState } from "react";
import { Loading } from "../Loading";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

export default function DefaultDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState<"skeleton" | "busy">("skeleton");

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-loading-default-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) =>
              setVariant(e.currentTarget.value === "busy" ? "busy" : "skeleton")
            }
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <article>
          <h3 className={css({ fontSize: "xl", fontWeight: "bold", mb: "sm" })}>
            Lorem ipsum dolor sit amet
          </h3>
          <p className={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>
  );
}

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-native";
  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", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-default-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "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>

LoadingVariant

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 setup lang="ts">
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const loading = ref(true);
const variant = ref<"skeleton" | "busy">("skeleton");
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const onToggle = (e: Event) =>
  (loading.value = (e.target as HTMLInputElement).checked);
const onVariant = (e: Event) =>
  (variant.value = (e.target as HTMLSelectElement).value as
    | "skeleton"
    | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-loading-default-toggle"
        appearance="switch"
        :checked="loading"
        @change="onToggle"
        >Loading</Checkbox
      >
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative :items="variants" :value="variant" @change="onVariant" />
      </label>
    </div>

    <Loading :loading="loading" :variant="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>
</template>

Card

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

AstroReactSvelteVue

PreviewCode

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.

LoadingVariant

Analytical Engine

Ada Lovelace · 1843

ResearchPublished

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

import { useState } from "react";
import { Loading } from "../Loading";
import { Card } from "@pindoba/react-card";
import Button from "@pindoba/react-button";
import { Badge } from "@pindoba/react-badge";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

export default function CardDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState<"skeleton" | "busy">("skeleton");

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-loading-card-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) =>
              setVariant(e.currentTarget.value === "busy" ? "busy" : "skeleton")
            }
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <Card
          header={{
            heading: "Analytical Engine",
            subheading: "Ada Lovelace · 1843",
          }}
        >
          <div className={stack({ gap: "md", direction: "column" })}>
            <div className={hstack({ gap: "xs", flexWrap: "wrap" })}>
              <Badge feedback="primary">Research</Badge>
              <Badge feedback="success">Published</Badge>
            </div>
            <p className={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 className={hstack({ gap: "sm" })}>
              <Button emphasis="primary">Read more</Button>
              <Button emphasis="ghost">Share</Button>
            </div>
          </div>
        </Card>
      </Loading>
    </div>
  );
}

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-native";
  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", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-card-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "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>

LoadingVariant

Analytical Engine

Ada Lovelace · 1843

ResearchPublished

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

<script setup lang="ts">
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Card } from "@pindoba/vue-card";
import { Button } from "@pindoba/vue-button";
import { Badge } from "@pindoba/vue-badge";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const loading = ref(true);
const variant = ref<"skeleton" | "busy">("skeleton");
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const onToggle = (e: Event) =>
  (loading.value = (e.target as HTMLInputElement).checked);
const onVariant = (e: Event) =>
  (variant.value = (e.target as HTMLSelectElement).value as
    | "skeleton"
    | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-loading-card-toggle"
        appearance="switch"
        :checked="loading"
        @change="onToggle"
        >Loading</Checkbox
      >
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative :items="variants" :value="variant" @change="onVariant" />
      </label>
    </div>

    <Loading :loading="loading" :variant="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>
</template>

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

AstroReactSvelteVue

PreviewCode

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.

LoadingVariant

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.

import { useState } from "react";
import { Loading } from "../Loading";
import { Banner } from "@pindoba/react-banner";
import { Alert } from "@pindoba/react-alert";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

export default function BannerDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState<"skeleton" | "busy">("skeleton");

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-loading-banner-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) =>
              setVariant(e.currentTarget.value === "busy" ? "busy" : "skeleton")
            }
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <div className={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>
  );
}

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-native";
  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", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-banner-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "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>

LoadingVariant

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 setup lang="ts">
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Banner } from "@pindoba/vue-banner";
import { Alert } from "@pindoba/vue-alert";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const loading = ref(true);
const variant = ref<"skeleton" | "busy">("skeleton");
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const onToggle = (e: Event) =>
  (loading.value = (e.target as HTMLInputElement).checked);
const onVariant = (e: Event) =>
  (variant.value = (e.target as HTMLSelectElement).value as
    | "skeleton"
    | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-loading-banner-toggle"
        appearance="switch"
        :checked="loading"
        @change="onToggle"
        >Loading</Checkbox
      >
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative :items="variants" :value="variant" @change="onVariant" />
      </label>
    </div>

    <Loading :loading="loading" :variant="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>
</template>

Form

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

AstroReactSvelteVue

PreviewCode

Loading Variant

LoadingVariant

import { useState } from "react";
import { Loading } from "../Loading";
import { Input } from "@pindoba/react-input";
import { SelectNative } from "@pindoba/react-select-native";
import Button from "@pindoba/react-button";
import { Checkbox } from "@pindoba/react-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";

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" },
];

export default function FormDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState<"skeleton" | "busy">("skeleton");

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-loading-form-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) =>
              setVariant(e.currentTarget.value === "busy" ? "busy" : "skeleton")
            }
          />
        </label>
      </div>

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

Loading Variant

<script lang="ts">
  import Loading from "../Loading.svelte";
  import Input from "@pindoba/svelte-input";
  import Select from "@pindoba/svelte-select-native";
  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", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-form-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "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>

LoadingVariant

<script setup lang="ts">
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Input } from "@pindoba/vue-input";
import { SelectNative } from "@pindoba/vue-select-native";
import { Button } from "@pindoba/vue-button";
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack, hstack } from "@pindoba/styled-system/patterns";

const loading = ref(true);
const variant = ref<"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" },
];
const onToggle = (e: Event) =>
  (loading.value = (e.target as HTMLInputElement).checked);
const onVariant = (e: Event) =>
  (variant.value = (e.target as HTMLSelectElement).value as
    | "skeleton"
    | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-loading-form-toggle"
        appearance="switch"
        :checked="loading"
        @change="onToggle"
        >Loading</Checkbox
      >
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative :items="variants" :value="variant" @change="onVariant" />
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <form :class="stack({ gap: 'md', direction: 'column' })">
        <Input placeholder="Full name" />
        <Input placeholder="Email" type="email" />
        <SelectNative :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>
</template>

Feed

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

AstroReactSvelteVue

PreviewCode

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.

LoadingVariant

Grace Hopper@amazing_grace· 2hMentorPioneer
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· 5hAuthor
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· 1dFounder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

import { useState } from "react";
import { Loading } from "../Loading";
import { Stamp } from "@pindoba/react-stamp";
import { Badge } from "@pindoba/react-badge";
import Button from "@pindoba/react-button";
import { Checkbox } from "@pindoba/react-checkbox";
import { SelectNative } from "@pindoba/react-select-native";
import { stack, hstack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

/**
 * Inline Lucide icons (mirror the `@lucide/svelte/icons/*` used by the Svelte
 * demo). The Stamp/Button recipes size the child `svg`, so the icons take no
 * size class of their own.
 */
const base = {
  xmlns: "http://www.w3.org/2000/svg",
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: "2",
  strokeLinecap: "round" as const,
  strokeLinejoin: "round" as const,
};

function UserIcon() {
  return (
    <svg {...base}>
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
      <circle cx="12" cy="7" r="4" />
    </svg>
  );
}

function MessageCircleIcon() {
  return (
    <svg {...base}>
      <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
    </svg>
  );
}

function RepeatIcon() {
  return (
    <svg {...base}>
      <path d="m2 9 3-3 3 3" />
      <path d="M13 18H7a2 2 0 0 1-2-2V6" />
      <path d="m22 15-3 3-3-3" />
      <path d="M11 6h6a2 2 0 0 1 2 2v10" />
    </svg>
  );
}

function HeartIcon() {
  return (
    <svg {...base}>
      <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
    </svg>
  );
}

function ShareIcon() {
  return (
    <svg {...base}>
      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
      <polyline points="16 6 12 2 8 6" />
      <line x1="12" x2="12" y1="2" y2="15" />
    </svg>
  );
}

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",
  },
];

const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];

export default function FeedDemo() {
  const [loading, setLoading] = useState(true);
  const [variant, setVariant] = useState<"skeleton" | "busy">("skeleton");

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "xl" })}>
      <div
        className={hstack({
          gap: "md",
          alignItems: "center",
          flexWrap: "wrap",
        })}
      >
        <Checkbox
          id="react-loading-feed-toggle"
          appearance="switch"
          checked={loading}
          onChange={(e) => setLoading(e.currentTarget.checked)}
        >
          Loading
        </Checkbox>
        <label className={hstack({ gap: "xs", alignItems: "center" })}>
          <span>Variant</span>
          <SelectNative
            items={variants}
            value={variant}
            onChange={(e) =>
              setVariant(e.currentTarget.value === "busy" ? "busy" : "skeleton")
            }
          />
        </label>
      </div>

      <Loading loading={loading} variant={variant}>
        <ul
          className={stack({
            gap: "lg",
            direction: "column",
            listStyle: "none",
            padding: "0",
            margin: "0",
          })}
        >
          {posts.map((post) => (
            <li
              key={post.handle}
              className={hstack({ gap: "md", alignItems: "flex-start" })}
            >
              <Stamp shape="circle">
                <UserIcon />
              </Stamp>
              <div
                className={stack({ gap: "sm", direction: "column", flex: "1" })}
              >
                <div
                  className={hstack({
                    gap: "sm",
                    alignItems: "center",
                    flexWrap: "wrap",
                  })}
                >
                  <strong>{post.name}</strong>
                  <span
                    className={css({
                      color: "neutral.text.muted",
                      fontSize: "sm",
                    })}
                  >
                    {post.handle}
                  </span>
                  <span
                    className={css({
                      color: "neutral.text.muted",
                      fontSize: "sm",
                    })}
                  >
                    · {post.time}
                  </span>
                  {post.tags.map((tag) => (
                    <Badge key={tag} feedback="primary" size="sm">
                      {tag}
                    </Badge>
                  ))}
                </div>
                <span
                  className={css({
                    color: "neutral.text.muted",
                    fontSize: "sm",
                  })}
                >
                  {post.role}
                </span>
                <p className={css({ margin: "0", lineHeight: "1.5" })}>
                  <span>{post.text}</span>
                </p>
                <div
                  className={hstack({
                    gap: "lg",
                    color: "neutral.text.muted",
                    fontSize: "sm",
                  })}
                >
                  <Button emphasis="ghost" size="sm">
                    <MessageCircleIcon />
                    <span>{post.replies}</span>
                  </Button>
                  <Button emphasis="ghost" size="sm">
                    <RepeatIcon />
                    <span>{post.reposts}</span>
                  </Button>
                  <Button emphasis="ghost" size="sm">
                    <HeartIcon />
                    <span>{post.likes}</span>
                  </Button>
                  <Button emphasis="ghost" size="sm">
                    <ShareIcon />
                  </Button>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </Loading>
    </div>
  );
}

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-native";
  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", alignItems: "center", flexWrap: "wrap" })}>
    <Checkbox
      id="svelte-loading-feed-toggle"
      appearance="switch"
      bind:checked={loading}
    >
      Loading
    </Checkbox>
    <label class={hstack({ gap: "xs", alignItems: "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", alignItems: "flex-start" })}>
          <Stamp shape="circle"><LucideUser /></Stamp>
          <div class={stack({ gap: "sm", direction: "column", flex: "1" })}>
            <div
              class={hstack({
                gap: "sm",
                alignItems: "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>

LoadingVariant

Grace Hopper@amazing_grace· 2hMentorPioneer
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· 5hAuthor
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· 1dFounder
Analyst · Analytical Engine
The Analytical Engine weaves algebraical patterns, just as the Jacquard loom weaves flowers and leaves.

<script setup lang="ts">
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Stamp } from "@pindoba/vue-stamp";
import { Badge } from "@pindoba/vue-badge";
import { Button } from "@pindoba/vue-button";
import { Checkbox } from "@pindoba/vue-checkbox";
import { SelectNative } from "@pindoba/vue-select-native";
import { User, Heart, MessageCircle, Repeat, Share } from "./_icons";
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",
  },
];

const loading = ref(true);
const variant = ref<"skeleton" | "busy">("skeleton");
const variants = [
  { id: "skeleton", label: "Skeleton", value: "skeleton" },
  { id: "busy", label: "Busy", value: "busy" },
];
const onToggle = (e: Event) =>
  (loading.value = (e.target as HTMLInputElement).checked);
const onVariant = (e: Event) =>
  (variant.value = (e.target as HTMLSelectElement).value as
    | "skeleton"
    | "busy");
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'xl' })">
    <div :class="hstack({ gap: 'md', alignItems: 'center', flexWrap: 'wrap' })">
      <Checkbox
        id="vue-loading-feed-toggle"
        appearance="switch"
        :checked="loading"
        @change="onToggle"
        >Loading</Checkbox
      >
      <label :class="hstack({ gap: 'xs', alignItems: 'center' })">
        <span>Variant</span>
        <SelectNative :items="variants" :value="variant" @change="onVariant" />
      </label>
    </div>

    <Loading :loading="loading" :variant="variant">
      <ul
        :class="
          stack({
            gap: 'lg',
            direction: 'column',
            listStyle: 'none',
            padding: '0',
            margin: '0',
          })
        "
      >
        <li
          v-for="post in posts"
          :key="post.handle"
          :class="hstack({ gap: 'md', alignItems: 'flex-start' })"
        >
          <Stamp shape="circle"><User /></Stamp>
          <div :class="stack({ gap: 'sm', direction: 'column', flex: '1' })">
            <div
              :class="
                hstack({ gap: 'sm', alignItems: '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
              >
              <Badge
                v-for="tag in post.tags"
                :key="tag"
                feedback="primary"
                size="sm"
                >{{ tag }}</Badge
              >
            </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"
                ><MessageCircle /><span>{{ post.replies }}</span></Button
              >
              <Button emphasis="ghost" size="sm"
                ><Repeat /><span>{{ post.reposts }}</span></Button
              >
              <Button emphasis="ghost" size="sm"
                ><Heart /><span>{{ post.likes }}</span></Button
              >
              <Button emphasis="ghost" size="sm"><Share /></Button>
            </div>
          </div>
        </li>
      </ul>
    </Loading>
  </div>
</template>

Corner indicator

For busy regions where the shimmer alone can be subtle — short status blocks, single rows, dense forms — pass indicator to render an animated spinner anchored to the top-end corner. It’s rendered via Attachment so it sits over the region without affecting its layout, and only shows while loading is true.

busy also defaults to speed="fast" (a 1s shimmer cycle) so the motion reads as “actively working” rather than “loading slowly”. Pass speed explicitly to override.

AstroReactSvelteVue

PreviewCode

Saving changes…

A short status region where the shimmer alone could be easy to miss. The corner spinner makes the busy state unmistakable.

Saving changes…

A short status region where the shimmer alone could be easy to miss. The corner spinner makes the busy state unmistakable.

import { useState } from "react";
import { Loading } from "../Loading";
import { Checkbox } from "@pindoba/react-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function IndicatorDemo() {
  const [loading, setLoading] = useState(true);

  return (
    <div className={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
      <Checkbox
        id="react-loading-indicator-toggle"
        appearance="switch"
        checked={loading}
        onChange={(e) => setLoading(e.currentTarget.checked)}
      >
        Loading
      </Checkbox>

      <Loading loading={loading} variant="busy" indicator>
        <article
          className={css({
            p: "md",
            borderWidth: "1px",
            borderStyle: "solid",
            borderColor: "neutral.border.muted",
            borderRadius: "md",
          })}
        >
          <h3 className={css({ fontSize: "lg", fontWeight: "bold", mb: "xs" })}>
            Saving changes…
          </h3>
          <p>
            <span>
              A short status region where the shimmer alone could be easy to
              miss. The corner spinner makes the busy state unmistakable.
            </span>
          </p>
        </article>
      </Loading>
    </div>
  );
}

Saving changes…

A short status region where the shimmer alone could be easy to miss. The corner spinner makes the busy state unmistakable.

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

  let loading = $state(true);
</script>

<div class={stack({ gap: "md", direction: "column", maxWidth: "lg" })}>
  <Checkbox
    id="svelte-loading-indicator-toggle"
    appearance="switch"
    bind:checked={loading}
  >
    Loading
  </Checkbox>

  <Loading {loading} variant="busy" indicator>
    <article
      class={css({
        p: "md",
        borderWidth: "1px",
        borderStyle: "solid",
        borderColor: "neutral.border.muted",
        borderRadius: "md",
      })}
    >
      <h3 class={css({ fontSize: "lg", fontWeight: "bold", mb: "xs" })}>
        Saving changes…
      </h3>
      <p>
        <span>
          A short status region where the shimmer alone could be easy to miss.
          The corner spinner makes the busy state unmistakable.
        </span>
      </p>
    </article>
  </Loading>
</div>

Saving changes…

A short status region where the shimmer alone could be easy to miss. The corner spinner makes the busy state unmistakable.

<script setup lang="ts">
import { ref } from "vue";
import { Loading } from "@pindoba/vue-loading";
import { Checkbox } from "@pindoba/vue-checkbox";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const loading = ref(true);
const onToggle = (e: Event) =>
  (loading.value = (e.target as HTMLInputElement).checked);
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', maxWidth: 'lg' })">
    <Checkbox
      id="vue-loading-indicator-toggle"
      appearance="switch"
      :checked="loading"
      @change="onToggle"
      >Loading</Checkbox
    >

    <Loading :loading="loading" variant="busy" indicator>
      <article
        :class="
          css({
            p: 'md',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: 'neutral.border.muted',
            borderRadius: 'md',
          })
        "
      >
        <h3 :class="css({ fontSize: 'lg', fontWeight: 'bold', mb: 'xs' })">
          Saving changes…
        </h3>
        <p>
          <span>
            A short status region where the shimmer alone could be easy to miss.
            The corner spinner makes the busy state unmistakable.
          </span>
        </p>
      </article>
    </Loading>
  </div>
</template>

#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

#Corner indicator

Saving changes…

Which variant, and when

Picking the wrapper element

Per-child overrides

Component-specific behaviour

Accessibility

Default

Card

Banner & Alerts

Form

Feed

Corner indicator