What is Spin animation (loading) in Tailwind?

Tailwindmarkup~5 mins

Spin animation (loading) in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Spin animation shows that something is loading or working. It helps users know to wait.

When a page or data is loading and you want to show progress.

When a button triggers a process that takes time.

When fetching information from the internet.

When uploading or downloading files.

When waiting for a response from a server.

Syntax

Tailwind

<div class="animate-spin">...</div>

animate-spin is a Tailwind CSS class that makes an element spin continuously.

You can add size and color classes to style the spinner.

Examples

A small blue spinner with a transparent top border to create a spinning effect.

Tailwind

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

An SVG spinner using Tailwind's animate-spin and color classes.

Tailwind

<svg class="animate-spin h-8 w-8 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>

Sample Program

This code shows a blue circular spinner in the center of the page. The spinner uses Tailwind's animate-spin class to rotate continuously. The border-t-transparent creates the spinning effect by making the top border invisible.

It also uses role="status" and aria-label="Loading" for accessibility, so screen readers announce the loading state.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Spin Animation Loading</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="animate-spin h-12 w-12 border-4 border-blue-600 border-t-transparent rounded-full" role="status" aria-label="Loading">
  </div>
</body>
</html>

OutputSuccess

Important Notes

Use role="status" and aria-label for accessibility so screen readers know the spinner means loading.

You can change spinner size by adjusting h- and w- classes.

Use contrasting colors for good visibility and accessibility.

Summary

animate-spin makes elements spin continuously in Tailwind CSS.

Use border styles and colors to create a spinner shape.

Add accessibility attributes so all users understand the loading state.