StaticSpinner

import StaticSpinner from "@wikicasa-dev/components/UIKit/StaticSpinner";

A 24×24px spinning ring drawn as an SVG. Use it for short, local waits: inside a button after a click, next to a label that is refreshing. For placeholder content while a section loads, use BaseShimmerLoader / ShimmerMultiLine instead.

The ring is white by default (stroke-color="#fff"), meant for filled primary buttons. On a light background set stroke-color.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import StaticSpinner from "@wikicasa-dev/components/UIKit/StaticSpinner";

const sending = ref(true);
</script>

<template>
  <p class="status">
    <StaticSpinner v-if="sending" stroke-color="#2b5dff" role="status" aria-label="Invio della richiesta in corso" />
    <span>Stiamo inviando la tua richiesta all'agenzia…</span>
  </p>
</template>

<style scoped>
.status { display: flex; align-items: center; gap: 8px; }
</style>

#Do / Don't

• Do set stroke-color whenever the background isn't dark or primary-colored, or the spinner is invisible.
• Do give it an accessible name (role="status" + aria-label, they land on the <svg>) when it is the only sign that something is happening.
• thickness is the stroke width in a 128-unit viewBox (default 9); raise it when you scale the spinner up.
• To resize it, set width/height through a class with enough specificity (or !important): the SVG already carries the library's 24px size classes.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
thickness	number	9
strokeColor	string	"#fff"

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.