Skeleton Bar

<script setup lang="ts">
import MtSkeletonBar from "@shopware-ag/meteor-component-library/MtSkeletonBar";
</script>

<template>
  <mt-skeleton-bar />
</template>

Usage

Skeleton Bar is a shimmering placeholder block for when the final content structure is known but the real content is still loading. Use it in cards, lists, tables, or detail views where preserving the final layout helps reduce visual jump, and combine multiple bars when the loading state should suggest lines of text or grouped placeholder content.

import { MtSkeletonBar } from "@shopware-ag/meteor-component-library";

Examples

Form layout

Combine several bars across a grid to mirror the structure of the content that will appear.

<script setup lang="ts">
import MtSkeletonBar from "@shopware-ag/meteor-component-library/MtSkeletonBar";
</script>

<template>
  <div style="display: grid; gap: 32px">
    <div
      style="
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
      "
    >
      <div>
        <mt-skeleton-bar />
      </div>
      <div>
        <mt-skeleton-bar />
      </div>
    </div>

    <div
      style="
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
      "
    >
      <div>
        <mt-skeleton-bar />
      </div>
      <div>
        <mt-skeleton-bar />
      </div>
    </div>

    <div
      style="
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
      "
    >
      <div>
        <mt-skeleton-bar />
      </div>
      <div>
        <mt-skeleton-bar />
      </div>
      <div>
        <mt-skeleton-bar />
      </div>
    </div>
  </div>
</template>

API reference

Best practices

Match the placeholder size and grouping roughly to the final content shape.
Use Skeleton Bar close to the surface where the real content will appear.
Replace the skeleton as soon as the actual content is ready.
Combine several bars with different widths when that helps communicate the expected structure.

Don't

Do not use Skeleton Bar when you can show real progress or completion state.
Do not leave skeleton placeholders visible for long-running tasks without additional context.
Do not use skeleton bars as a generic decoration when nothing is actually loading.
Do not make users interact with placeholder content that is not ready yet.

Behavior

Skeleton Bar is purely visual. It renders a shimmer animation over a neutral placeholder surface.
The component takes the full available width of its container, so surrounding layout controls its final size.
Consecutive skeleton bars add vertical spacing automatically, which makes it easy to stack them into text-like placeholder groups.

Accessibility

Skeleton Bar does not announce loading state or placeholder semantics on its own.
When the loading state matters for assistive technologies, expose that state on the surrounding region or pair it with additional loading text.
Keep the placeholder structure close to the final content so all users can understand what area is being loaded.

Loader: when a simple indeterminate loading indicator is enough and a structural placeholder would not add value.

Edit this pageorReport an issue

Select

A control for choosing one or more values from a list of predefined options.

Slider

A draggable control for choosing a numeric value or range along a scale.