Spinner

Atom

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

Anatomy

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

Samples

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

Properties

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

export interface SpinnerProps {
  color?: string;
  position?: SpinnerPosition;
}

Playground

Color

Text

Position

LeftRight

Left

Loading...

        
          

            <
            Spinner

            





            

                color
              
                =
                "var(--color-lila-30)"
              

                position
              
                =
                "left"
              



  />

Developer notes

The optional message is provided through the #text slot. When no #text slot content is passed, only the spinner is rendered.

Implementation example:

<Spinner
  :color="props.color"
  :position="props.position"
>
  <template #text>
    {{ props.text }}
  </template>
</Spinner>