Spinner
Usage
Use the Spinner component to indicate loading states in your application. Choose between border, grow, or logo variations, and customize with color, size, and label props.
<template>
<div class="flex flex-wrap gap-4 items-center">
<MeSpinner type="border" color="primary" size="xsm" />
<MeSpinner type="border" color="success" size="sm" />
<MeSpinner type="grow" color="warning" size="md" />
<MeSpinner type="grow" color="danger" size="lg" />
<MeSpinner type="logo" color="primary-2" />
</div>
</template>
Type
Choose between border, grow, or logo variations.
<template>
<div class="flex flex-wrap gap-4 items-center">
<MeSpinner type="border" />
<MeSpinner type="grow" />
<MeSpinner type="logo" />
</div>
</template>
Color
Use the color prop to customize the spinner color.
For border and grow: use semantic tokens (primary, neutral, success, warning, danger).
For logo: only primary-1 and primary-2 are available.
<template>
<div class="flex flex-wrap gap-4 items-center">
<MeSpinner type="border" color="primary" />
<MeSpinner type="border" color="danger" />
<MeSpinner type="grow" color="success" />
<MeSpinner type="grow" color="warning" />
<MeSpinner type="logo" color="primary-2" />
</div>
</template>
Size
The size prop defines the spinner dimensions (border and grow types only). For the variation "logo", the size is fixed.
<template>
<div class="flex flex-wrap gap-4 items-center">
<MeSpinner type="border" size="xsm" />
<MeSpinner type="border" size="sm" />
<MeSpinner type="border" size="md" />
<MeSpinner type="border" size="lg" />
</div>
</template>
Fluid
The fluid prop makes the spinner expand to fill the container.
<template>
<div>
<MeSpinner type="border" fluid />
</div>
</template>
Label
The label prop provides an accessible text description. It's hidden visually but read by screen readers.
<template>
<div class="flex flex-wrap gap-4 items-center">
<MeSpinner type="grow" color="primary" label="Carregando dados..." />
<MeSpinner type="border" color="neutral" label="Buscando informações..." />
</div>
</template>
Examples
Inline with Text
Display a spinner alongside text to indicate loading state.
Loading data...
<template>
<div class="flex items-center gap-2">
<MeSpinner type="border" size="sm" />
<span>Loading data...</span>
</div>
</template>
Card Loading State
Use a fluid spinner to fill a card container while loading content.
<template>
<div class="card-container">
<MeSpinner type="border" color="primary" fluid />
</div>
</template>
<style scoped>
.card-container {
width: 300px;
height: 200px;
border: 1px solid var(--me-neutral-300);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
Table Loading State
Display a spinner in a table cell to indicate data is being fetched.
Loading rows...
<template>
<tr>
<td colspan="5" class="text-center p-4">
<div class="flex items-center justify-center gap-2">
<MeSpinner type="grow" color="neutral" size="sm" />
<span class="text-sm text-gray-600">Loading rows...</span>
</div>
</td>
</tr>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
type | 'border' | 'border' | 'grow' | 'logo' - Defines which spinner variation to render |
color | 'neutral' | 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'primary-1' | 'primary-2' - Spinner color. Logo type supports only primary-1 and primary-2 |
size | 'sm' | 'xsm' | 'sm' | 'md' | 'lg' - Spinner size. Not applied when type is logo |
fluid | false | boolean - Makes the spinner take the full width and height of its container |
label | 'Loading...' | string - Accessible label for screen readers. Also displayed visually in grow type |