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

<script setup lang="ts">
import { BaseSpinner } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseSpinner" color="primary">Primary</component>
    <component :is="BaseSpinner" color="secondary">Secondary</component>
    <component :is="BaseSpinner" color="info">Info</component>
    <component :is="BaseSpinner" color="success">Success</component>
    <component :is="BaseSpinner" color="warning">Warning</component>
    <component :is="BaseSpinner" color="danger">Danger</component>
  </div>
</template>

Size

A Spinner component has various size.

Code

<script setup lang="ts">
import { BaseSpinner } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseSpinner" size="xs">Button xs</component>
    <component :is="BaseSpinner" size="sm">Button sm</component>
    <component :is="BaseSpinner" size="md">Button md</component>
    <component :is="BaseSpinner" size="lg">Button lg</component>
    <component :is="BaseSpinner" size="xl">Button xl</component>
  </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.