Animation

Built-in animations

Skel UI defaults to using a shimmer animation effect for skeletons, but it also includes a built-in pulse animation.

<body className=""> ... </body>

<body className="skel-ui-pulse"> ... </body>

The timing of the animation can be customized using CSS variables.

global.css

:root {
  --skel-ui-animation-duration: 3500ms;
  --skel-ui-animation-easing: ease-in-out;
  --skel-ui-animation-delay: 250ms;
}

If the built-in animations and configurations do not meet your requirements, Skel UI offers the flexibility to create custom animations.

[data-loading="true"] {
  animation:  /* Put your animation */;
}