The Spinner component is used to indicate loading or processing within the UI. It provides a simple, animated visual cue to users that an operation is in progress.

• Status Colors: Supports multiple color variants to match different themes or semantic meanings.
• Sizes: Customizable size to fit inline or standalone usage.
• Flexible placement: Can be used inside buttons, cards, or standalone areas.

Usage Example

Preview

success

warning

error

info

xs

sm

md

lg

xl

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Spinner } from "@fefade-ui/svelte"
</script>

<div
  style="
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.5rem;
  "
>
  {#each Constants.statusColors as color (color)}
    <div
      style="
      display: flex;
      flex-direction: column;
      align-items: center;
      "
    >
      <Spinner class="text-on-{color}" size="md" />
      <span>{color}</span>
    </div>
  {/each}

  {#each Constants.sizes as size (size)}
    <div
      style="
      display: flex;
      flex-direction: column;
      align-items: center;
      "
    >
      <Spinner {size} color="primary" />
      <span>{size}</span>
    </div>
  {/each}
</div>

Props

Prop	Type	Default	Description
size	"sm" | "md" | "lg"	"md"	Controls the size of the spinner.
color	string	"primary"	Sets the color of the spinner, typically aligned with theme colors or status indicators.
class	string	—	Optional CSS class to apply additional styling.
style	CSSProperties	—	Inline styles for further customization.

Notes

• Can be combined with text or other indicators to show progress context.
• Works well as a standalone loader or inside UI components like buttons, modals, or cards.