How to add a loading spinner

To show an indeterminate loading spinner, generate a Lottie spec with the spinner preset and render it with <Anvil>.

Generate the spec¶

From the anvil repo, or any project that has the package:

node scripts/make-spec.mjs spinner --color "#5b8cff" --id load --out load.json

Or in code, without the CLI:

import { spinner } from "@acoyfellow/anvil/lottie-author";

const spec = {
  id: "load",
  kind: "lottie",
  width: 200,
  height: 200,
  loop: true,
  autoplay: true,
  data: spinner({ color: "#5b8cff", strokeWidth: 12 }),
};

Render it conditionally¶

<script>
  import { Anvil } from "@acoyfellow/anvil";
  import spec from "./load.json";
  let { loading } = $props();
</script>

{#if loading}
  <Anvil {spec} />
{/if}

For a presence dot instead of a spinner, use the pulse preset. For a success tick when loading finishes, see the CLI reference for the checkmark preset.