Spinner

Used to provide a visual cue that an action is processing.

Demo

React

Color schemeNonePrimarySecondarySuccessWarningDanger

SizeSmallMediumLargeExtra Large

VariantRingDual Ring

Vue

Color schemeNonePrimarySecondarySuccessWarningDanger

SizeSmallMediumLargeExtra Large

VariantRingDual Ring

Example

React

// Import component
import { Spinner } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/spinner.css';

return (
  <Spinner
    colorScheme="success"
    size="lg"
    variant="dual-ring"
  />
);

Vue

<script setup lang="ts">
// Import component
import { Spinner } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/spinner.css';
</script>

<template>
  <Spinner
    color-scheme="success"
    size="lg"
    variant="dual-ring"
  />
</template>

Props

React

Name	Type	Default	Description
variant	SpinnerVariant	ring	Spinner variant
size	SpinnerSize	md	Spinner size
colorScheme	ColorScheme	—	Spinner color scheme 1
boxSize	CssUnit	—	Spinner box size 2
thickness	CssUnit	—	Spinner thickness 3

Vue

Name	Type	Default	Description
variant	SpinnerVariant	ring	Spinner variant
size	SpinnerSize	md	Spinner size
color-scheme	ColorScheme	—	Spinner color scheme 1
box-size	CssUnit	—	Spinner box size 2
thickness	CssUnit	—	Spinner thickness 3

1. If not provided, the spinner will inherit the text color of its parent element.
2. If provided, the size prop will be ignored.
3. Makes sense only if boxSize is provided.

Types

export type SpinnerColorScheme = 'primary' | 'secondary' | 'success' | 'danger' | 'warning'
export type SpinnerSize = 'sm' | 'md' | 'lg'
export type SpinnerVariant = 'ring' | 'dual-ring'
export type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`