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

spinner

This tailwind example is contributed by $@(\/)(\/)¥, 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

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

Author $@(\/)(\/)¥

1.7k

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

Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

859
Steps -2

Author:
farisubuntu

1 year ago

2.2k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

3k
Loading Spinner Component - Animated Circle Loader
Loading spinner component featuring a smooth animated circle loader with dashed border animation. Perfect for website loading states, content loading indicators, and improving user experience during page transitions. Easy to implement and customize for any project.

Author:
Homayoun

5 months ago

710
Loding spinner with image inside

Author:
JaxStone

3 years ago

16.5k
Animated loading dots

Author:
TailwindFlex

3 years ago

17k
Loading dots
Black Loading dots

Author:
Anonymous

2 years ago

39.5k
Custom Loader
Custom loading with different colors

Author:
Deepak Kumar Chouhan

1 year ago

1.2k
Square loading spinner

Author:
Freja Jensen

3 years ago

14.7k
Loading spinner

Author:
Mohit Prajapati

3 years ago

18.6k
animate-spin spinner

Author:
Piet Vriend

3 years ago

10.8k
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:
Anonymous

8 months ago

693

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components