Animation

Use animation utilities to add predefined animations to elements. These include spin, ping, pulse, and bounce effects commonly used for loading indicators and attention-grabbing UI elements.

Adding a spin animation

Use the animate-spin utility to add a linear spin animation to elements like loading indicators.

Style('bg-indigo-500 ...', children: [
  Style('mr-3 size-5 animate-spin ...', children: [
    // ...
  ]),
  Text('Processing…'),
])

Adding a ping animation

Use the animate-ping utility to make an element scale and fade like a radar ping or ripple of water — useful for things like notification badges.

Style('relative flex size-3', children: [
  Style('absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75', child: SizedBox.shrink()),
  Style('relative inline-flex size-3 rounded-full bg-sky-500', child: SizedBox.shrink()),
])

Adding a pulse animation

Use the animate-pulse utility to make an element gently fade in and out — useful for things like skeleton loaders.

Style('h-28 w-full max-w-xs rounded-lg bg-white p-4 ring-1 ring-gray-900/5', child: Style('flex animate-pulse space-x-4', children: [
  Style('size-10 rounded-full bg-gray-200', child: SizedBox.shrink()),
  Style('flex-1 space-y-6 py-1', children: [
    Style('h-2 rounded bg-gray-200', child: SizedBox.shrink()),
    Style('space-y-3', children: [
      Style('grid grid-cols-3 gap-4', children: [
        Style('col-span-2 h-2 rounded bg-gray-200', child: SizedBox.shrink()),
        Style('col-span-1 h-2 rounded bg-gray-200', child: SizedBox.shrink()),
      ]),
      Style('h-2 rounded bg-gray-200', child: SizedBox.shrink()),
    ]),
  ]),
]))

Adding a bounce animation

Use the animate-bounce utility to make an element bounce up and down — useful for things like “scroll down” indicators.

Style('flex size-10 animate-bounce items-center justify-center rounded-full bg-white p-2 ring-1 ring-gray-900/5', child: Style('size-6 ...', children: [
  // ...
]))

Class reference

Class	Description
animate-spin	Add a linear spin animation (360deg rotation)
animate-ping	Add a ping animation (scale + fade out)
animate-pulse	Add a pulse animation (fade in and out)
animate-bounce	Add a bounce animation
animate-none	Remove all animations