Tailwind CSS Spinners (Loaders)

Spinner Tailwind CSS component indicates a loading state using a rotating circle animation. A visual cue for loading pages, cards, components, forms, etc.

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-primary" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Color variants

Predefined spinner color styles.

Theme:

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-muted-foreground" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-red-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-yellow-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-green-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-indigo-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-purple-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-pink-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-orange-600" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-foreground" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>

Sizes

A small size is good for loading text, default sized spin for loading a card-level block, and large spin used for loading a page.

Theme:

<div class="animate-spin inline-block size-8 border-3 border-current border-t-transparent rounded-[999px] text-primary" role="status" aria-label="loading">
                        <span class="sr-only">Loading...</span>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Inside a card

A spinner component displayed within a card container, useful for indicating loading states in content areas.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-4"><div class="min-h-60 flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                        <div class="p-4 flex flex-auto flex-col justify-center items-center">
                          <div class="flex justify-center">
                            <div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-primary" role="status" aria-label="loading">
                              <span class="sr-only">Loading...</span>
                            </div>
                          </div>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

Customized description

Customized description content.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-7 sm:mt-9"><div class="relative">
                        <div class="bg-primary-50 border border-primary-200 rounded-lg p-4 dark:bg-primary-500/20 dark:border-primary-900">
                          <div class="flex">
                            <div class="shrink-0">
                              <svg class="shrink-0 size-4 text-primary mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                            </div>
                            <div class="ms-3">
                              <h3 class="text-sm text-primary font-medium">
                                Attention needed
                              </h3>
                              <div class="text-sm text-primary mt-2">
                                <span class="font-semibold">Holy guacamole!</span> You should check in on some of those fields below.
                              </div>
                            </div>
                          </div>
                        </div>
  
                        <div class="absolute top-0 start-0 size-full bg-plain/30 rounded-lg"></div>

<div class="absolute top-1/2 start-1/2 transform -translate-x-1/2 -translate-y-1/2">
                          <div class="animate-spin inline-block size-6 border-3 border-current border-t-transparent rounded-[999px] text-primary" role="status" aria-label="loading">
                            <span class="sr-only">Loading...</span>
                          </div>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="relative">
                        <div class="bg-primary-50 border border-primary-200 rounded-lg p-4 dark:bg-primary-500/20 dark:border-primary-900">
                          <div class="flex">
                            <div class="shrink-0">
                              <svg class="shrink-0 size-4 text-primary mt-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
                            </div>
                            <div class="ms-3">
                              <h3 class="text-sm text-primary font-medium">
                                Attention needed
                              </h3>
                              <div class="text-sm text-primary mt-2">
                                <span class="font-semibold">Holy guacamole!</span> You should check in on some of those fields below.
                              </div>
                            </div>
                          </div>
                        </div>
  
                        <div class="absolute top-0 start-0 size-full bg-plain/30 rounded-lg"></div>

Tailwind CSS Spinners (Loaders)

Basic usage

Example

Color variants

Sizes

Inside a card

Customized description

On this page