Home
$@(\/)(\/)Y
spinner

spinner

This tailwind example is contributed by $@(\/)(\/)Y, on 09-Jan-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader

Spinner / Loading

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

Fork Fullscreen

<div class="h-screen w-full py-20 relative flex md:flex-row flex-col gap-10 justify-center items-center bg-gray-900 dark:bg-white">
    
    <div class="w-full h-full flex justify-center items-center">
        <div class="absolute animate-ping h-[16rem] w-[16rem] rounded-full  border-t-4 border-b-4 border-red-500 ">
        </div>
        <div class="absolute animate-spin h-[14rem] w-[14rem] rounded-full  border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div class="absolute animate-ping h-[12rem] w-[12rem] rounded-full  border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div class="absolute animate-spin h-[10rem] w-[10rem] rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div class="absolute animate-ping h-[8rem] w-[8rem] rounded-full border-t-4 border-b-4 border-green-500"></div>
        <div class="absolute animate-spin h-[6rem] w-[6rem] rounded-full border-t-4 border-b-4 border-blue-500"></div>
        <div
            class="rounded-full h-28 w-28 animate-bounce flex items-center justify-center text-gray-400 font-semibold text-xl dark:text-black">
            Loading...</div>

</div>

<div class="w-full h-full flex justify-center items-center">
        <div class="absolute animate-spin h-[16rem] w-[16rem] rounded-full  border-t-4 border-b-4 border-red-500 ">
        </div>
        <div class="absolute animate-spin h-[14rem] w-[14rem] rounded-full  border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div class="absolute animate-spin h-[12rem] w-[12rem] rounded-full  border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div class="absolute animate-spin h-[10rem] w-[10rem] rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div class="absolute animate-spin h-[8rem] w-[8rem] rounded-full border-t-4 border-b-4 border-green-500"></div>
        <div class="absolute animate-spin h-[6rem] w-[6rem] rounded-full border-t-4 border-b-4 border-blue-500"></div>
        <div
            class="rounded-full h-28 w-28 animate-bounce flex items-center justify-center text-gray-400 font-semibold text-xl dark:text-black">
            Loading...</div>

</div>

<div class="w-full h-full flex justify-center items-center">
        <div class="absolute animate-spin h-[16rem] w-[16rem] rounded-full  border-tr-4 border-b-4 border-red-500 ">
        </div>
        <div class="absolute animate-spin h-[14rem] w-[14rem] rounded-full  border-tl-4 border-b-4 border-purple-500 ">
        </div>
        <div class="absolute animate-spin h-[12rem] w-[12rem] rounded-full  border-tr-4 border-b-4 border-pink-500 ">
        </div>
        <div class="absolute animate-spin h-[10rem] w-[10rem] rounded-full border-tl-4 border-b-4 border-yellow-500">
        </div>
        <div class="absolute animate-spin h-[8rem] w-[8rem] rounded-full border-tr-4 border-b-4 border-green-500"></div>
        <div class="absolute animate-spin h-[6rem] w-[6rem] rounded-full border-tl-4 border-b-4 border-blue-500"></div>
        <div
            class="rounded-full h-28 w-28 animate-bounce flex items-center justify-center text-gray-400 font-semibold text-xl dark:text-black">
            Loading...</div>
    </div>
</div>

<section
    class="h-screen w-full py-20 relative flex md:flex-row flex-col justify-center items-center gap-10 bg-gray-900 dark:bg-white">

<div class="w-full h-full flex justify-center items-center">
        <div
            class="absolute animate-bounce h-[16rem] w-[16rem] shadow-xl shadow-red-500 rounded-full  border-t-4 border-b-4 border-red-500 ">
        </div>
        <div
            class="absolute animate-bounce h-[14rem] w-[14rem] shadow-xl shadow-indigo-500 rounded-full border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div
            class="absolute animate-bounce h-[12rem] w-[12rem] shadow-xl shadow-pink-500 rounded-full  border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div
            class="absolute animate-bounce h-[10rem] w-[10rem] shadow-xl shadow-yellow-500 rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div
            class="absolute animate-bounce h-[8rem] w-[8rem] shadow-xl shadow-green-500 rounded-full border-t-4 border-b-4 border-green-500">
        </div>
        <div
            class="absolute animate-bounce h-[6rem] w-[6rem] shadow-xl shadow-blue-500 rounded-full border-t-4 border-b-4 border-blue-500">
        </div>
        <div
            class="rounded-full h-28 w-28 animate-bounce flex items-center justify-center text-gray-400 font-semibold text-xl dark:text-black">
            Loading...</div>
    </div>

<div class="w-full h-full flex justify-center items-centr">
        <div
            class="absolute animate-spin h-[16rem] w-[16rem] shadow-xl shadow-red-500 rounded-full  border-t-4 border-b-4 border-red-500 ">
        </div>
        <div
            class="absolute animate-spin h-[14rem] w-[14rem] shadow-xl shadow-indigo-500 rounded-full border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div
            class="absolute animate-spin h-[12rem] w-[12rem] shadow-xl shadow-pink-500 rounded-full  border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div
            class="absolute animate-spin h-[10rem] w-[10rem] shadow-xl shadow-yellow-500 rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div
            class="absolute animate-spin h-[8rem] w-[8rem] shadow-xl shadow-green-500 rounded-full border-t-4 border-b-4 border-green-500">
        </div>
        <div
            class="absolute animate-spin h-[6rem] w-[6rem] shadow-xl shadow-blue-500 rounded-full border-t-4 border-b-4 border-blue-500">
        </div>
        <div
            class="rounded-full h-28 w-28 animate-bounce flex items-center justify-center text-gray-400 font-semibold text-xl dark:text-black">
            Loading...</div>
    </div>
</section>

<section
    class="h-screen w-full py-20 relative flex md:flex-row flex-col justify-center items-center gap-10 bg-gray-900 dark:bg-white">

<div class="w-full h-full flex justify-cente items-center">
        <div
            class="absolute animate-spin h-[16rem] w-[16rem] shadow-xl shadow-red-500 rounded-full  border-t-4 border-b-4 border-red-500 ">
        </div>
        <div
            class="absolute animate-spin h-[14rem] w-[14rem] shadow-xl shadow-indigo-500 rounded-full border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div
            class="absolute animate-boune h-[12rem] w-[12rem] shadow-xl shadow-pink-500 rounded-full  border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div
            class="absolute animate-spin h-[10rem] w-[10rem] shadow-xl shadow-yellow-500 rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div
            class="absolute animate-bouce h-[8rem] w-[8rem] shadow-xl shadow-green-500 rounded-full border-t-4 border-b-4 border-green-500">
        </div>
        <div
            class="absolute animate-spin h-[6rem] w-[6rem] shadow-xl shadow-blue-500 rounded-full border-t-4 border-b-4 border-blue-500">
        </div>
        <div
            class="rounded-full h-28 w-28 text-center inline-flex items-center justify-center text-gray-300 font-semibold text-xl dark:text-black">
            Loading</div>
    </div>

<div class="w-full h-full flex justify-center items-center">
        <div
            class="absolute animate-bounce h-[16rem] w-[16rem] shadow-xl shadow-red-500 rounded-full  border-t-4 border-b-4 border-red-500 ">
        </div>
        <div
            class="absolute animate-bounce h-[14rem] w-[14rem] shadow-xl shadow-indigo-500 rounded-full border-t-4 border-b-4 border-purple-500 ">
        </div>
        <div
            class="absolute animate-bounce h-[12rem] w-[12rem] shadow-xl shadow-pink-500 rounded-full  border-t-4 border-b-4 border-pink-500 ">
        </div>
        <div
            class="absolute animate-bounce h-[10rem] w-[10rem] shadow-xl shadow-yellow-500 rounded-full border-t-4 border-b-4 border-yellow-500">
        </div>
        <div
            class="absolute animate-bounce h-[8rem] w-[8rem] shadow-xl shadow-green-500 rounded-full border-t-4 border-b-4 border-green-500">
        </div>
        <div
            class="absolute animate-bounce h-[6rem] w-[6rem] shadow-xl shadow-blue-500 rounded-full border-t-4 border-b-4 border-blue-500">
        </div>
        <div
            class="rounded-full h-28 w-28 animate-bounce flex items-center justify-center text-gray-400 font-semibold text-xl dark:text-black">
            Loading...</div>
    </div>
</section>

Related Examples

Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

1 month ago

236
Ripple Animation

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

2 months ago

785
Spinner

Author:
Sienna

2 years ago

10.4k
Loading spinner

Author:
Mohit Prajapati

2 years ago

17.5k
Animated loading dots

Author:
TailwindFlex

2 years ago

15.8k
Ovel shaped loading spinner

Author:
Freja Jensen

2 years ago

16.9k
Loading animation using animate-ping

Author:
JaxStone

2 years ago

16.7k
Spinner rings

Author:
Samuel Dawson

2 years ago

12.3k
Custom Loader
Custom loading with different colors

Author:
Deepak Kumar Chouhan

5 months ago

670
Loading spinner examples

Author:
Sienna

2 years ago

15.3k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

2 years ago

24k
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Author:
Abhiraj

5 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components