Skip to main content
Browse docs

Marwes documentation

Spinner

Family-local loading-indicator family with a core Spinner component, adapter-owned context wrappers, and button-loading integration built on the same component contract.

What this family solves

Family-local loading-indicator family with a core Spinner component, adapter-owned context wrappers, and button-loading integration built on the same component contract.

Use when

  • The UI needs an indeterminate loading indicator for inline button loading, centered empty states, or standalone async feedback.
  • The product flow already matches ButtonSpinner or EmptyStateSpinner and benefits from the wrapper defaults for size, visual treatment, and local metadata.
  • The team wants React, Vue, and Svelte spinner behavior to stay aligned through one core SVG recipe, one preset CSS contract, and shared adapter contracts.

Avoid when

  • The experience needs determinate progress, percentage tracking, or skeleton structure rather than an indeterminate spinner.
  • The implementation cannot provide nearby loading text or a truthful ariaLabel when the spinner must announce status on its own.
  • The team expects the exploratory TinoSpinner animation assets or broader semantic brand/loading taxonomies from Figma to be part of the shipped API today.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

ButtonSpinner, EmptyStateSpinner, Spinner

Types

ButtonSpinnerProps, EmptyStateSpinnerProps, SpinnerProps

Vue — @marwes-ui/vue

Components

ButtonSpinner, EmptyStateSpinner, Spinner

Types

ButtonSpinnerProps, EmptyStateSpinnerProps, SpinnerProps

Svelte — @marwes-ui/svelte

Components

ButtonSpinner, EmptyStateSpinner, Spinner

Types

ButtonSpinnerProps, EmptyStateSpinnerProps, SpinnerProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { EmptyStateSpinner } from "@marwes-ui/react"

export function Example() {
  return <EmptyStateSpinner decorative={false} ariaLabel="Loading dashboard" />
}

Vue

<script setup lang="ts">
import { EmptyStateSpinner } from "@marwes-ui/vue"
</script>

<template>
  <EmptyStateSpinner :decorative="false" aria-label="Loading dashboard" />
</template>

Svelte

<script lang="ts">
  import { EmptyStateSpinner } from "@marwes-ui/svelte"
</script>

<EmptyStateSpinner decorative={false} ariaLabel="Loading dashboard" />

Accessibility requirements

  • Loading status: Provide nearby loading text or a truthful ariaLabel when the spinner announces status on its own.
  • Motion and screen-reader review: Verify longer loading sequences with assistive technology and reduced-motion preferences.
  • Manual review boundary: Product-level decisions about when loading is decorative versus when a spinner should expose a standalone accessible status name.
  • Manual review 2: Real browser and assistive-technology validation for longer loading sequences, repeated status announcements, and button-loading feel.
  • Manual review 3: Whether the slow-not-stop reduced-motion policy (1600ms) is sufficient for users who need full motion off in real product flows.

Theming

Spinner uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources