Animate-spin

The animate-spin class applies a continuous spinning animation to an element. It is commonly used for loading indicators.

Code Example

<div class="animate-spin h-10 w-10 border-4 border-blue-500 border-t-transparent rounded-full"></div>

Preview

How to Use

Add the animate-spin class directly to your HTML element:

<div class="animate-spin">
  <!-- Your content here -->
</div>

Responsive Usage

Use Tailwind's responsive prefixes to apply animate-spin at specific breakpoints:

<div class="sm:animate-spin md:animate-spin lg:animate-spin">
  Responsive element
</div>

• sm:animate-spin — applies from 640px and up
• md:animate-spin — applies from 768px and up
• lg:animate-spin — applies from 1024px and up

Customization

You can extend or override this utility in your tailwind.config.js. See the Tailwind CSS documentation for details on customizing your theme.

Related Classes

• Browse all Animation classes
• All Tailwind CSS classes