MazSpinner

MazSpinner is an animated loading indicator with the colors and sizes of the theme, to show that a content or an action is loading

Basic usage

<script>
import MazSpinner from 'maz-ui/components/MazSpinner'
</script>

<template>
  <MazSpinner />
</template>

Options

Colors

Choose the color of the spinner

By default the color is theme

<MazSpinner color="primary" />

<MazSpinner color="secondary" />

<MazSpinner color="destructive" />

<MazSpinner color="warning" />

<MazSpinner color="success" />

<MazSpinner color="info" />

<MazSpinner color="accent" />

<MazSpinner color="contrast" />

Sizes

Choose the size of the spinner

The default size is 2em

<MazSpinner size="1em" />

<MazSpinner size="2em" />

<MazSpinner size="3em" />

<MazSpinner size="4em" />

<MazSpinner size="5em" />

<MazSpinner size="6em" />

<MazSpinner size="7em" />

Props

Name	Description	Type	Required	Default	Possible values
size	The size of the spinner	``${number}rem|${number}px|${number}em|${number}vw|${number}vh|${number}vmin|${number}vmax|${number}%|${number}ch|${number}cm|${number}mm|${number}in|${number}ex|${number}pc|${number...`	No	"2em"	-
color	The color of the spinner	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"theme"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'