Spinners

A spinner for displaying loading state of a page or a component.

Basic Example

A simple loading status.

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

Color variants

Predefined spinner color styles.

<div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-gray-800 rounded-full
                                          " role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-gray-400
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-red-600
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-yellow-600
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-green-600
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-blue-600 rounded-full
                                          " role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-indigo-600
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-purple-600
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-pink-600
                                          rounded-full" role="status" aria-label="loading">
                                    <span class="sr-only">Loading...</span>
                                    </div>
                                    <div class="animate-spin inline-block w-6 h-6
                                          border-[3px] border-current border-t-transparent text-orange-600
                                          rounded-full" 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.

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