---
title: "MazFullscreenLoader"
description: "MazFullscreenLoader covers the whole page with a backdrop and a spinner to block the interface during a global loading"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-fullscreen-loader"
---

# MazFullscreenLoader

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

- Package: `maz-ui`
- Import: `import MazFullscreenLoader from 'maz-ui/components/MazFullscreenLoader'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-fullscreen-loader

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<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>
```

## MazFullscreenLoader API

`import MazFullscreenLoader from 'maz-ui/components/MazFullscreenLoader'`

### Props

- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the spinner.
- `size` (`` `${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... ``, default: `"3em"`): The size of the spinner.
- `teleport-selector` (`string`, default: `"body"`): The selector to teleport the loader.

### Slots

- `#default`