Primitives

Spinner

A pure-CSS loading indicator. No JavaScript, no animation library.

data-scope="spinner"

Usage

import { Spinner } from "@crosskit-ui/react";

<Spinner size="lg" />
<script setup lang="ts">
import { Spinner } from "@crosskit-ui/vue";
</script>

<template>
  <Spinner size="lg" />
</template>
<script lang="ts">
  import { Spinner } from "@crosskit-ui/svelte";
</script>

<Spinner size="lg" />
import { CkSpinner } from "@crosskit-ui/angular";

@Component({
  imports: [CkSpinner],
  template: `<ck-spinner size="lg" />`,
})
export class Demo {}

Props

PropTypeDefaultNotes
size"sm" | "md" | "lg""md"Spinner size.
variant"primary" | "neutral" | "current""current"Colour source. `current` inherits from the surrounding text.
labelstring"Loading"Accessible name announced by screen readers.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.