Spinner

A spinner says something is happening and cannot say how far along it is. Where the progress is known, a ProgressBar tells the reader more; where a whole region is loading and its shape is already known, a Skeleton tells them more still.

import { Spinner } from "ropav";

color

 accentsuccesswarningdangercurrent

size

 xssmmdlgxl

<Spinner />

Following the text around it

color="current" takes the surrounding text colour instead of a named one, which is what you want for a spinner sitting inside a sentence, a button or a muted caption.

Checking the domain

spinner-current-color.vue

<script setup lang="ts">
import { Spinner } from "ropav";
</script>

<template>
  <div class="note">
    <Spinner color="current" size="sm" />
    Checking the domain
  </div>
</template>

<style scoped>
.note {
  color: var(--rp-muted);
  display: flex;
  align-items: center;
  gap: calc(var(--rp-spacing) * 2);
  font-size: var(--rp-text-sm);
  line-height: var(--rp-text-sm--line-height);
}
</style>

A Button does not need one: is-pending already marks an in-flight action and announces the change.

Accessibility

• The spinner is a role="status" named "Loading", so a reader is told a wait has started without being interrupted mid-sentence.
• Where the wait has something more specific to say — which file, which step — say it in text beside the spinner and let the spinner be the picture of it.
• The gradient the arc is painted with is given an id per instance, so two spinners on one page do not both resolve to whichever definition the document reached first.

API

Prop	Type	Default	Description
color	"accent" | "success" | "warning" | "danger" | "current"	"accent"	Spinner color. current inherits the surrounding text color.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Spinner size.