PubSpinner

This is a component for rendering spinners that can be used to show loading indicators.

Default Usage

<template>
  <pub-spinner />
</template>

<script setup lang="ts">
import { PubSpinner } from 'vuelicity'
</script>

Spinner Sizes

Prop - size Usage

The size prop is used to set the size of the spinner. It's value is similar to Tailwind spacing unit (4= 1rem, 8 = 2rem).

<template>
  <pub-spinner />
  <pub-spinner size="6" />
  <pub-spinner size="8" />
  <pub-spinner size="10" />
  <pub-spinner size="12" />
</template>

<script setup lang="ts">
import { PubSpinner } from 'vuelicity'
</script>

Colored Spinners

Prop - color Usage

The color prop is used to set the color of the spinner.

<template>
  <pub-spinner color="blue" />
  <pub-spinner color="grey" />
  <pub-spinner color="green" />
  <pub-spinner color="pink" />
  <pub-spinner color="purple" />
  <pub-spinner color="red" />
  <pub-spinner color="white" />
  <pub-spinner color="yellow" />
  <pub-spinner color="#3fb984" /> <!-- Custom color -->
</template>

<script setup lang="ts">
import { PubSpinner } from 'vuelicity'
</script>

Reference

Properties

Name	Type	Default	Description	Options
size	String	4	Size of the spinner	'0'|'0.5'|'1'|'1.5'|'2'|'2.5'|'3'|'4'|'5'|'6'|'7'|'8'|'9'|'10'|'11'|'12'
color	String	blue	Color of the spinner (also accepts hex string)	'blue'|'grey'|'green'|'pink'|'purple'|'red'|'white'|'yellow'|'#{color_hexcode}'