Spinner

components/Spinner.vue — Full-page loading spinner (120x120px). Fades in after 300ms delay. Used in 11 files: document upload, overlays, payment, signing, file lists.

SpinnerSmall

components/SpinnerSmall.vue — Compact 30x30px spinner for inline use. Has dark prop for dark backgrounds (grey stroke) vs light backgrounds (white stroke). Used in 10+ files.

Dark variant (on light background)

<spinner-small dark />

Light variant (on dark background)

<spinner-small /> — Default white stroke for use on dark/colored backgrounds.

Inside a button

Common pattern: replacing button text with SpinnerSmall during async operations.

SigningSpinner

components/SigningSpinner.vue — Large branded spinner shown during signing process. Green-to-blue gradient ring (186px) with Skribble checkmark logo centered. Used in OverlaySigning. Fades in with 360ms delay.

DancingDotsLoader

components/DancingDotsLoader.vue — Three bouncing dots animation (36px wide). Used as inline loading indicator in PlanUpgradeCard and OverlayAddSeats.

In context

Typical usage: replacing a price or value while loading.

v-progress-circular

Vuetify's built-in circular progress indicator. Used across 33+ files for general loading states in pages, dialogs, and overlays.

VisualSignatureSkeleton

components/visual-signature/VisualSignatureSkeleton.vue — SVG skeleton placeholder for visual signatures. Shows avatar circle, text lines, and a shimmer animation. Used in SignatureImage.

SealSkeleton

components/visual-signature/SealSkeleton.vue — Simple rectangular SVG skeleton with shimmer for seal images. Used in SealImage.

v-skeleton-loader

Vuetify's built-in skeleton loader. Used across the app for page-level loading states in dashboard, profile, billing, activity, and business pages.