MazFullscreenLoader

MazFullscreenLoader covers the whole page with a backdrop and a spinner to block the interface during a global loading

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

Basic usage

<script lang="ts" setup>
import { MazBtn, MazFullscreenLoader } from 'maz-ui/components'

import { ref } from 'vue'

const showLoader = ref(false)
</script>

<template>
  <MazFullscreenLoader v-if="showLoader" @click="showLoader = false">
    <p>
      Loading...
    </p>
    <p>
      (click to hide loader)
    </p>
  </MazFullscreenLoader>

  <MazBtn @click="showLoader = true">
    Show loader
  </MazBtn>
</template>

Props

Name	Description	Type	Required	Default	Possible values
color	The color of the spinner	"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"	No	"primary"	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'destructive' | 'contrast' | 'transparent'
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	"3em"	-
teleport-selector	The selector to teleport the loader	string	No	"body"	-

Slots

Name	Description	Bindings
default		-