Spinner

Atom

An animated section of the circle icon that spins to indicate an ongoing process.

Playground

Text

Position

LeftRight

Left

Loading...

        
          

            <
            Spinner

            
              
                 position
                
                  =
                  "left"
                



/>

Properties

export type SpinnerPosition = 'left' | 'right';

export interface SpinnerProps {
  position?: SpinnerPosition;
}

const slots = defineSlots<{
  /** Optional text rendered beside the spinner */
  default: () => any;
}>();

Anatomy

1. Circle - vector image of circle section that is animated to spin.
2. Container - set to 24 x 24 pixels to maintain consistency in size and spacing.

Variants

Colors

• The Spinner can be coloured according to its use case.