Skip to content

Spinner

The VSpinner component is a spinning loader used to indicate that content is loading.

Usage

Basic Usage

To use the VSpinner component, simply include it in your template:

INFO

The VSpinner component is registered globally when you install with @morpheme/ui. So you don't need to import it manually.

Colors

You can customize the color of the spinner using the color prop. This prop accepts a string value corresponding to one of the available colors. The default value is default.

  • prop: color
  • type: string
  • default: ``
  • required: false

Use color to different color style to the spinner.

Size

You can customize the size of the spinner using the xSmall, small, large, or xLarge prop. These props are boolean values and should be set to true to activate the corresponding size. The default size is medium.

Props

NameTypeDefault
colorstring , available colorsdefault
xSmallbooleanfalse
smallbooleanfalse
largebooleanfalse
xLargebooleanfalse

Standalone Installation

You can also install the Spinner component individually via @morpheme/spnner package:

bash
npm i @morpheme/spinner
npm i @morpheme/spinner
vue
<script setup lang="ts">
import VSpinner from '@morpheme/spinner';
</script>

<template>
  <VSpinner />
</template>
<script setup lang="ts">
import VSpinner from '@morpheme/spinner';
</script>

<template>
  <VSpinner />
</template>

Storybook

View Storybook documentation here.