Spinner

A Spinner component is used to show the user a timely process is currently taking place.

Examples

Color

A Spinner component has various color.

Code

<template>
  <div>
    <base-spinner color="primary">Primary</base-spinner>
    <base-spinner color="secondary">Secondary</base-spinner>
    <base-spinner color="info">Info</base-spinner>
    <base-spinner color="success">Success</base-spinner>
    <base-spinner color="warning">Warning</base-spinner>
    <base-spinner color="danger">Danger</base-spinner>
  </div>
</template>

Size

A Spinner component has various size.

Code

<template>
  <div>
    <base-spinner size="xs">Button xs</base-spinner>
    <base-spinner size="sm">Button sm</base-spinner>
    <base-spinner size="md">Button md</base-spinner>
    <base-spinner size="lg">Button lg</base-spinner>
    <base-spinner size="xl">Button xl</base-spinner>
  </div>
</template>

With SVG Icon

An animate-spin class can be used in another element.

Code

<template>
  <base-icon icon="i-fas-spinner" class="h-8 w-8 animate-spin" />
  <base-icon icon="i-fas-spinner-third" class="h-8 w-8 animate-spin" />
  <base-icon icon="i-fas-arrows-spin" class="h-8 w-8 animate-spin" />
  <base-icon icon="i-fas-gear" class="h-8 w-8 animate-spin" />
</template>

Spinner API

Types

export type BaseSpinnerColorType =
  | 'primary'
  | 'secondary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
  | 'black'
  | 'white'

export type BaseSpinnerSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

Props

Name	Type	Default	Description
color	BaseSpinnerColorType	primary	Button color.
size	BaseSpinnerSizeType	md	Button size.