Shimmer KIT

Examples API Setup

tuiShimmer directive visually implements the "Shimmer" UI pattern — an animated loading indicator that simulates content appearance while data is being fetched. This pattern enhances the user experience by providing visual feedback during loading states, helping users understand that the interface is active and content is on its way.

When to Use

To indicate loading states in cards, headers, lists, avatars, and other UI elements. When you want to visually communicate that content is loading, rather than missing or frozen. Shimmer is used when you have cached data that is currently being refreshed and if you have no data at all — a better choice would be Skeleton

Basic

#
Shimmer
You got $237 000,42 left

Where's the money, Lebowski?

Skeleton

Disabled animations

#
You got $237 000,42 left

Where's the money, Lebowski?