Tailwind CSS Spinners - Madhuranjan UI

Components

Tailwind CSS Spinners - Madhuranjan UI

Discover a diverse collection of spinners built with Tailwind CSS. These loaders are fully responsive, support both light and dark mode, and are optimized for any modern UI application.

Basic Spinner Types

Explore simple and effective spinner animations to indicate loading states. Each one is built using Tailwind utility classes.

1<div class="flex flex-wrap justify-center items-center gap-6 p-6 bg-white dark:bg-gray-900 shadow-md">
2  <!-- Default Spinner -->
3  <div class="animate-spin size-6 border-3 border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500" role="status" aria-label="loading">
4    <span class="sr-only">Loading...</span>
5  </div>
6
7  <!-- Small Spinner -->
8  <div class="animate-spin size-4 border-2 border-current border-t-transparent text-violet-600 rounded-full dark:text-violet-400" role="status" aria-label="loading">
9    <span class="sr-only">Loading...</span>
10  </div>

Colored Spinner Variations

These spinners use color utilities to visually match your brand or context—like success, danger, and info states.

1<div class="flex flex-wrap justify-center items-center gap-6 p-6 bg-white dark:bg-black shadow-md rounded-xl">
2  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-blue-800 rounded-full dark:text-blue-400"></div>
3  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-red-600 rounded-full dark:text-red-400"></div>
4  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-green-600 rounded-full dark:text-green-400"></div>
5  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-yellow-500 rounded-full dark:text-yellow-300"></div>
6  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-indigo-600 rounded-full dark:text-indigo-400"></div>
7  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-purple-600 rounded-full dark:text-purple-400"></div>
8  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-pink-600 rounded-full dark:text-pink-400"></div>
9  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-cyan-600 rounded-full dark:text-cyan-400"></div>
10  <div class="animate-spin size-7 border-3 border-current border-t-transparent text-teal-600 rounded-full dark:text-teal-400"></div>

Button with Spinner

Add loaders directly inside buttons to show ongoing actions like submitting a form or saving data.

1<div class="flex flex-col sm:flex-row gap-4 p-6 items-center">
2  <!-- Primary Button (Blue) -->
3  <button class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white font-medium rounded-lg shadow-md transition-all hover:bg-blue-700 dark:bg-blue-500 dark:text-white dark:hover:bg-blue-600">
4    <div class="animate-spin size-5 border-2 border-current border-t-transparent rounded-full"></div>
5    Loading...
6  </button>
7
8  <!-- Outline Button (Gray) -->
9  <button class="flex items-center gap-2 px-5 py-2.5 border border-gray-300 text-gray-700 font-medium rounded-lg shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800">
10    <div class="animate-spin size-5 border-2 border-current border-t-transparent rounded-full"></div>

20+ Creative Spinners

A collection of more than 20 unique spinner styles—circles, dots, bars, hexagons, and more—all styled with pure Tailwind CSS.

1<div class="flex flex-wrap items-center justify-center gap-6 rounded-xl bg-white p-6 shadow-md dark:bg-black">
2  <!-- Dotted Spinner -->
3  <div class="relative size-10">
4    <div class="absolute size-10 animate-ping rounded-full border-4 border-current border-t-transparent text-red-600 dark:text-red-400"></div>
5    <div class="absolute size-10 animate-spin rounded-full border-4 border-dotted border-current border-t-transparent text-red-600 dark:text-red-400"></div>
6  </div>
7
8  <!--. Dashed Spinner -->
9  <div class="size-10 animate-spin rounded-full border-4 border-dashed border-current border-t-transparent text-green-600 dark:text-green-400"></div>
10

Sharingan Spinner

Are you a Naruto Fan? If yes, i have created someting special for you and it is Sharingan Spinner Add this in your Website to Make it look Cooler.

1<div class="flex items-center justify-evenly  p-5 ">
2  <!-- Sharingan Spinner -->
3  <div class="relative h-32 w-32 animate-[spin_2s_ease-in-out_infinite] rounded-full border-[5px] border-black bg-[#e41414]">
4    <div class="absolute top-1/2 left-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 rounded-full border-[4px] border-[rgba(110,13,13,0.5)]">
5      <!-- Tomoe 1 -->
6      <div class="absolute top-[-0.5rem] left-1/2 z-10 h-4 w-4 -translate-x-1/2 rounded-full bg-black"></div>
7      <!-- Tomoe 2 -->
8      <div class="absolute bottom-[0.5rem] left-[-0.3rem] z-10 h-4 w-4 rotate-[-120deg] rounded-full bg-black"></div>
9      <!-- Tomoe 3 -->
10      <div class="absolute right-[-0.3rem] bottom-[0.5rem] z-10 h-4 w-4 rotate-[120deg] rounded-full bg-black"></div>

Progress Bar Skeleton Loader