Home
Samuel Abera
spineer

spineer

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

412

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

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

1 week ago

126
Spinner rings
open ring spinners

Author:
Samuel Dawson

2 years ago

8.8k
Square loading spinner

Author:
Freja Jensen

2 years ago

13k
Loader
loading

Author:
Aman kumar

6 months ago

1.7k
3D Box

Author:
Samuel Abera

9 months ago

3.8k
Spinner
Gradient Spinner

Author:
Samuel Abera

9 months ago

3.2k
Spinner rings closed

Author:
Samuel Dawson

1 year ago

9.2k
Ovel shaped loading spinner

Author:
Freja Jensen

1 year ago

15k
Steps -2

Author:
farisubuntu

5 months ago

928
Contact Spinner
Contact button spinning

Author:
Samuel Abera

9 months ago

4k
Loding spinner with image inside

Author:
JaxStone

2 years ago

13.8k
animate-spin spinner

Author:
Piet Vriend

1 year ago

9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components