DOM Studio

Component

Vue Spinner Component

<DomSpinner>

A compact loading indicator for buttons, toolbars, inline rows, and pending states.

Playground

Try every prop live

Spinner playground

Adjust the props to explore sizing, content, and behaviour.

Saving
Playground.vuevue
Install
npm install @getdom/studio
vue
<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomSpinner } from '@getdom/studio';

const data = reactive({
		"label": "Saving",
		"size": "md",
		"tone": "primary",
		"background": "color-mix(in oklab, var(--warning) 20%, transparent)",
		"foreground": "var(--warning)"
	});
</script>

<template>
	<DomSpinner
		v-bind="data"
	/>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
labelstringstring'Loading'Screen reader label.
size'sm' | 'md' | 'lg'string'md'Spinner size.
tone'primary' | 'neutral' | 'success' | 'warning' | 'danger'string'primary'Spinner foreground colour when no custom foreground is provided.
backgroundstringstring''CSS color for the stationary donut track. Defaults to a tint of the foreground.
foregroundstringstring''CSS color for the spinning arc. Overrides tone when provided.

Auto-generated from Spinner.props and inline _edit hints.