---
title: "MazLoadingBar"
description: "MazLoadingBar is an indeterminate progress bar to show that something is loading, typically at the top of a page or a container"
package: "maz-ui"
url: "https://maz-ui.com/components/maz-loading-bar"
---

# MazLoadingBar

> MazLoadingBar is an indeterminate progress bar to show that something is loading, typically at the top of a page or a container

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

> 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 MazLoadingBar from 'maz-ui/components/MazLoadingBar'
</script>

<template>
  <MazLoadingBar color="secondary" />
</template>
```

## MazLoadingBar API

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

### Props

- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the component.
- `height` (`string`): The height of the component.