Shimmer ​

Shimmer is a content placeholder component that can be used to visually indicate that content is loading.

Usage ​

Basic Usage ​

To use the VShimmer component, simply add it to your template:

Rounded ​

You can make the shimmer animation rounded by setting the rounded prop:

Circle ​

To create a circular shimmer animation, set both the height and width props to the same value and set the rounded prop:

Multiple Lines ​

To create multiple lines in the shimmer animation, set the lines prop to the desired number of lines:

Card Shimmer ​

Here is an example of how you can use the shimmer animation within a card layout:

Props ​

Events ​

None

Slots ​

None

CSS Variable ​

:root {
  --shimmer-bg-image: linear-gradient(
    to right,
    rgb(247, 247, 247),
    rgb(220, 220, 220),
    rgb(247, 247, 247)
  );
  --shimmer-bg-size: 200%;
  --shimmer-border-radius: 0;
  --shimmer-animation-name: a-background-move;
  --shimmer-animation-duration: 1.5s;
}

:root {
  --shimmer-bg-image: linear-gradient(
    to right,
    rgb(247, 247, 247),
    rgb(220, 220, 220),
    rgb(247, 247, 247)
  );
  --shimmer-bg-size: 200%;
  --shimmer-border-radius: 0;
  --shimmer-animation-name: a-background-move;
  --shimmer-animation-duration: 1.5s;
}

Standalone Installation ​

You can also install the Shimmer component individually via @morpheme/shimmer package:

yarn add @morpheme/shimmer

yarn add @morpheme/shimmer

npm i @morpheme/shimmer

npm i @morpheme/shimmer

pnpm add @morpheme/shimmer

pnpm add @morpheme/shimmer

<script setup lang="ts">
import Shimmer from '@morpheme/shimmer';
</script>

<template>
  <Shimmer />
</template>

<script setup lang="ts">
import Shimmer from '@morpheme/shimmer';
</script>

<template>
  <Shimmer />
</template>

Storybook ​

View Storybook documentation here.