MazSkeleton

MazSkeleton is a standalone component to display loading placeholders with animated shimmer effect

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

TIP

This component can be translated globally using the MazUi plugin.

Basic usage

The skeleton displays a loading placeholder with a shimmer animation by default.

Shapes

Use the shape prop to change the skeleton shape: rectangle (default), circle, or square.

rectangle

circle

square

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <MazSkeleton shape="rectangle" width="100px" height="1rem" />
  <MazSkeleton shape="circle" size="3rem" />
  <MazSkeleton shape="square" size="3rem" />
</template>

Sizes

Use the size prop to set both width and height (for circle and square shapes), or use width and height props for more control.

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <MazSkeleton shape="circle" size="2rem" />
  <MazSkeleton shape="circle" size="3rem" />
  <MazSkeleton shape="circle" size="4rem" />
  <MazSkeleton shape="circle" size="5rem" />
</template>

Custom dimensions

For rectangles, use width and height props for precise control.

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <MazSkeleton width="100%" height="0.75rem" />
  <MazSkeleton width="80%" height="0.75rem" />
  <MazSkeleton width="60%" height="0.75rem" />
</template>

Rounded sizes

Control the border radius using the rounded-size prop.

none

full

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <MazSkeleton rounded-size="none" width="80px" height="2rem" />
  <MazSkeleton rounded-size="sm" width="80px" height="2rem" />
  <MazSkeleton rounded-size="md" width="80px" height="2rem" />
  <MazSkeleton rounded-size="lg" width="80px" height="2rem" />
  <MazSkeleton rounded-size="xl" width="80px" height="2rem" />
  <MazSkeleton rounded-size="full" width="80px" height="2rem" />
</template>

Disable animation

Use the animated prop set to false to disable the shimmer animation.

animated

static

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <MazSkeleton shape="circle" size="3rem" :animated="true" />
  <MazSkeleton shape="circle" size="3rem" :animated="false" />
</template>

Card skeleton example

Combine multiple skeletons to create loading placeholders for complex layouts.

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <div class="card-skeleton">
    <MazSkeleton shape="circle" size="3rem" />
    <div class="content">
      <MazSkeleton width="60%" height="0.875rem" />
      <MazSkeleton width="40%" height="0.75rem" />
    </div>
  </div>
</template>

Article skeleton example

Create an article loading placeholder with various skeleton elements.

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <div class="article-skeleton">
    <!-- Featured image -->
    <MazSkeleton width="100%" height="200px" rounded-size="lg" />

    <!-- Title and description -->
    <MazSkeleton width="80%" height="1.5rem" />
    <MazSkeleton width="100%" height="0.75rem" />
    <MazSkeleton width="100%" height="0.75rem" />
    <MazSkeleton width="60%" height="0.75rem" />

    <!-- Author -->
    <div class="author">
      <MazSkeleton shape="circle" size="2rem" />
      <MazSkeleton width="100px" height="0.75rem" />
    </div>
  </div>
</template>

List skeleton example

Create a list loading placeholder.

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <div class="list-skeleton">
    <div v-for="i in 4" :key="i" class="list-item">
      <MazSkeleton shape="square" size="2.5rem" rounded-size="md" />
      <div class="content">
        <MazSkeleton width="70%" height="0.75rem" />
        <MazSkeleton width="50%" height="0.625rem" />
      </div>
    </div>
  </div>
</template>

Accessibility

The component includes proper accessibility attributes:

role="status" to indicate loading state
aria-live="polite" for screen reader announcements
Customizable aria-label and loading-text props

vue

<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <MazSkeleton
    shape="circle"
    size="3rem"
    aria-label="Loading user avatar"
    loading-text="Please wait while loading..."
  />
</template>

Props

Name	Description	Type	Required	Default	Possible values
shape	Skeleton shape type	`'circle' \| 'rectangle' \| 'square'`	No	`rectangle`	`circle, rectangle, square`
size	Size with units (ex: '2rem', '40px', '3em')	`SizeUnit`	No	`1rem`	-
width	Custom width	`SizeUnit`	No	`undefined`	-
height	Custom height	`SizeUnit`	No	`undefined`	-
animated	Disable animation	`boolean`	No	`true`	-
rounded-size	Controls the border radius	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'`	No	`base`	`none, sm, md, lg, xl, full, base`
aria-label	Accessibility label	`string`	No	`skeleton.ariaLabel' (translations)`	-
loading-text	Loading text for accessibility	`string`	No	`skeleton.loadingText' (translations)`	-

MazSkeleton ​

Basic usage ​

Shapes ​

Sizes ​

Custom dimensions ​

Rounded sizes ​

Disable animation ​

Card skeleton example ​

Article skeleton example ​

List skeleton example ​

Accessibility ​

Props ​