GkSpinner

CSS spinner with role="status", aria-live="polite", and configurable aria-label.

When to use

Use for short-lived loading states inside buttons, cards, and inline async flows.

Live Examples

Sizes

sm and md inline spinners with explicit labels.

vue

<script setup lang="ts">
import { GkSpinner } from 'god-kit/vue'
</script>

<template>
  <div class="gk-doc-row">
    <GkSpinner size="sm" label="Loading small" />
    <GkSpinner size="md" label="Loading" />
  </div>
</template>

<style scoped>
.gk-doc-row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-4);
}
</style>

On filled surfaces

tone on-filled keeps contrast on primary-colored regions.

On solid fills, use tone="on-filled" (GkButton does this when loading):

vue

<script setup lang="ts">
import { GkSpinner } from 'god-kit/vue'
</script>

<template>
  <p class="gk-doc-muted">
    On solid fills, use <code>tone="on-filled"</code> (GkButton does this when loading):
  </p>
  <div class="gk-doc-row">
    <span class="gk-doc-on-fill">
      <GkSpinner size="sm" tone="on-filled" label="On primary" />
    </span>
  </div>
</template>

<style scoped>
.gk-doc-muted {
  margin: 0;
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-on-surface-muted);
}

.gk-doc-row {
  display: flex;
  align-items: center;
  gap: var(--gk-space-4);
}

.gk-doc-on-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gk-space-3) var(--gk-space-5);
  border-radius: var(--gk-radius-md);
  background: var(--gk-color-primary);
}
</style>

Button loading

GkButton shows a spinner and accepts loading-label for assistive text.

vue

<script setup lang="ts">
import { GkButton } from 'god-kit/vue'
import { ref } from 'vue'

const saving = ref(false)
</script>

<template>
  <GkButton :loading="saving" loading-label="Saving invoice" @click="saving = !saving">
    Save
  </GkButton>
</template>

API

Props

Prop	Type	Default	Description
size	'sm' | 'md'	'md'	Visual size
label	string	'Loading'	Exposed to assistive tech
tone	'default' | 'on-filled'	'default'	on-filled uses --gk-color-text-on-primary for the ring so it stays visible on solid primary/danger fills; GkButton passes this automatically when loading on those variants

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Always provide a contextual label when the spinner appears away from surrounding explanatory text.
• Avoid long-running spinner-only states; pair with status text when operations can take longer.

Related components

• GkButton
• GkSkeletonLoader
• GkSnackbar