On this page

Spinner

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner />

import { Spinner } from "@/components/starwind/spinner";

export function Example() {
  return (
    <>
      <Spinner />
    </>
  );
}

<script setup lang="ts">
import { Spinner } from "@/components/starwind/spinner";
</script>

<template>
  <Spinner />
</template>

<script lang="ts">
  import { Spinner } from "@/components/starwind/spinner";
</script>

<div class="flex items-center justify-center p-8">
  <Spinner />
</div>

Installation

pnpx starwind@latest add spinner --framework astro

npx starwind@latest add spinner --framework astro

yarn dlx starwind@latest add spinner --framework astro

pnpx starwind@latest add spinner --framework react

npx starwind@latest add spinner --framework react

yarn dlx starwind@latest add spinner --framework react

pnpx starwind@latest add spinner --framework vue

npx starwind@latest add spinner --framework vue

yarn dlx starwind@latest add spinner --framework vue

pnpx starwind@latest add spinner --framework svelte

npx starwind@latest add spinner --framework svelte

yarn dlx starwind@latest add spinner --framework svelte

Usage

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner />

import { Spinner } from "@/components/starwind/spinner";

export function Example() {
  return (
    <>
      <Spinner />
    </>
  );
}

<script setup lang="ts">
import { Spinner } from "@/components/starwind/spinner";
</script>

<template>
  <Spinner />
</template>

<script lang="ts">
  import { Spinner } from "@/components/starwind/spinner";
</script>

<Spinner />

Custom Size

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner class="size-4" />
<Spinner class="size-6" />
<Spinner class="size-8" />
<Spinner class="size-12" />

import { Spinner } from "@/components/starwind/spinner";

export function Example() {
  return (
    <>
      <Spinner className="size-4" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
      <Spinner className="size-12" />
    </>
  );
}

<script setup lang="ts">
import { Spinner } from "@/components/starwind/spinner";
</script>

<template>
  <Spinner class="size-4" />
  <Spinner class="size-6" />
  <Spinner class="size-8" />
  <Spinner class="size-12" />
</template>

<script lang="ts">
  import { Spinner } from "@/components/starwind/spinner";
</script>

<Spinner class="size-4" />
<Spinner class="size-6" />
<Spinner class="size-8" />
<Spinner class="size-12" />

Custom Color

---
import { Spinner } from "@/components/starwind/spinner";
---

<Spinner class="text-blue-500" />
<Spinner class="text-green-500" />
<Spinner class="text-red-500" />
<Spinner class="text-purple-500" />

import { Spinner } from "@/components/starwind/spinner";

export function Example() {
  return (
    <>
      <Spinner className="text-blue-500" />
      <Spinner className="text-green-500" />
      <Spinner className="text-red-500" />
      <Spinner className="text-purple-500" />
    </>
  );
}

<script setup lang="ts">
import { Spinner } from "@/components/starwind/spinner";
</script>

<template>
  <Spinner class="text-blue-500" />
  <Spinner class="text-green-500" />
  <Spinner class="text-red-500" />
  <Spinner class="text-purple-500" />
</template>

<script lang="ts">
  import { Spinner } from "@/components/starwind/spinner";
</script>

<Spinner class="text-blue-500" />
<Spinner class="text-green-500" />
<Spinner class="text-red-500" />
<Spinner class="text-purple-500" />

In Button

---
import { Spinner } from "@/components/starwind/spinner";
import { Button } from "@/components/starwind/button";
---

<Button disabled aria-busy="true">
  <Spinner />
  Loading...
</Button>

import { Spinner } from "@/components/starwind/spinner";
import { Button } from "@/components/starwind/button";

export function Example() {
  return (
    <>
      <Button disabled aria-busy="true">
        <Spinner />
        Loading...
      </Button>
    </>
  );
}

<script setup lang="ts">
import { Spinner } from "@/components/starwind/spinner";
import { Button } from "@/components/starwind/button";
</script>

<template>
  <Button disabled aria-busy="true">
    <Spinner />
    Loading...
  </Button>
</template>

<script lang="ts">
  import { Spinner } from "@/components/starwind/spinner";
  import { Button } from "@/components/starwind/button";
</script>

<Button disabled aria-busy="true">
  <Spinner /> Loading...
</Button>

API Reference

Changelog

View version history v1.1.2 5 releases

v1.1.2

Updated the Vue loading icon to match Astro and React.

v1.1.1

Removed the conflicting SVG mode prop from the Astro and React public prop contracts so fresh Astro projects type-check cleanly.

v1.1.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.10.0