Quick reference

Class	Properties
`.animate-none`	animation: none;
`.animate-spin`	animation: spin 1s linear infinite;
`.animate-ping`	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
`.animate-pulse`	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
`.animate-bounce`	animation: bounce 1s infinite;

Basic usage

Spin

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

<button type="button" class="btn btn-primary ...">
  <i class="animate-spin fas fa-spinner"></i>
  Processing...
</button>

Ping

Add 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.

  <div class="position-relative d-inline-flex">
    <button type="button" class="btn btn-outline-primary pe-none fw-semibold ">Transactions</button>
    <span class="d-flex position-absolute bd-h-3 bd-w-3 top-0 end-0 mt-n1 me-n1">
      <span class="animate-ping position-absolute h-100 w-100 rounded-circle bg-primary bg-opacity-75"></span>
      <span class="rounded-circle bd-h-3 bd-w-3 bg-primary"></span>
    </span>
  </div>

Pulse

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

<div class="max-w-sm mx-auto bg-body rounded">
  <div class="animate-pulse d-flex align-items-start shadow p-3">
    <span class="placeholder rounded-circle bd-h-10 bd-w-10"></span>
    <div class="ms-3 flex-grow-1">
      <span class="placeholder placeholder-xs col-10"></span>
      <span class="placeholder placeholder-xs col-6 mt-3"></span>
      <span class="placeholder placeholder-xs col-4 mt-3"></span>
      <span class="placeholder placeholder-xs col-12"></span>
    </div>
  </div>
</div>

Bounce

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

<div class="animate-bounce ...">
  <i class="fas fa-arrow-down fa-lg"></i>
</div>

Edit this page on Github

Last updated on April 6, 2024