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

312

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