Back to Discover

Tailwind CSS Loading Spinner Code

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinners</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
    <style>
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        .animate-spin {
            animation: spin 1s linear infinite;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-8">
    <div class="max-w-5xl w-full" x-data="{ active: 'spinner1' }">
        <h1 class="text-3xl font-bold text-gray-900 mb-8 text-center">Loading Spinners</h1>
        
        <!-- Spinner Selection -->
        <div class="flex flex-wrap gap-3 justify-center mb-12">
            <button @click="active = 'spinner1'" 
                    :class="active === 'spinner1' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                    class="px-4 py-2 rounded-lg font-medium transition-colors">
                Classic
            </button>
            <button @click="active = 'spinner2'" 
                    :class="active === 'spinner2' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                    class="px-4 py-2 rounded-lg font-medium transition-colors">
                Dots
            </button>
            <button @click="active = 'spinner3'" 
                    :class="active === 'spinner3' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                    class="px-4 py-2 rounded-lg font-medium transition-colors">
                Ring
            </button>
            <button @click="active = 'spinner4'" 
                    :class="active === 'spinner4' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700'"
                    class="px-4 py-2 rounded-lg font-medium transition-colors">
                With Icon
            </button>
        </div>

        <!-- Spinner Displays -->
        <div class="bg-white rounded-2xl shadow-lg p-16 min-h-64 flex items-center justify-center">
            
            <!-- Spinner 1: Classic Border Spinner -->
            <div x-show="active === 'spinner1'" class="text-center">
                <div class="inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent"></div>
                <p class="mt-4 text-gray-600">Loading...</p>
            </div>

            <!-- Spinner 2: Bouncing Dots -->
            <div x-show="active === 'spinner2'" class="flex space-x-2">
                <div class="h-3 w-3 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0s"></div>
                <div class="h-3 w-3 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                <div class="h-3 w-3 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
            </div>

            <!-- Spinner 3: Double Ring -->
            <div x-show="active === 'spinner3'" class="relative">
                <div class="h-16 w-16 rounded-full border-4 border-gray-200"></div>
                <div class="absolute top-0 left-0 h-16 w-16 animate-spin rounded-full border-4 border-solid border-blue-600 border-t-transparent"></div>
            </div>

            <!-- Spinner 4: With Ionicon -->
            <div x-show="active === 'spinner4'" class="text-center">
                <div class="inline-block animate-spin text-blue-600">
                    <ion-icon name="sync-outline" class="text-5xl"></ion-icon>
                </div>
                <p class="mt-4 text-gray-600 font-medium">Processing...</p>
            </div>

        </div>

        <!-- Code Preview -->
        <div class="mt-8 bg-gray-900 rounded-lg p-6 overflow-x-auto">
            <pre class="text-gray-100 text-sm">
<code x-show="active === 'spinner1'">&lt;div class="inline-block h-12 w-12 animate-spin rounded-full 
     border-4 border-solid border-blue-600 border-r-transparent"&gt;
&lt;/div&gt;</code><code x-show="active === 'spinner2'">&lt;div class="flex space-x-2"&gt;
  &lt;div class="h-3 w-3 bg-blue-600 rounded-full animate-bounce"&gt;&lt;/div&gt;
  &lt;div class="h-3 w-3 bg-blue-600 rounded-full animate-bounce"&gt;&lt;/div&gt;
  &lt;div class="h-3 w-3 bg-blue-600 rounded-full animate-bounce"&gt;&lt;/div&gt;
&lt;/div&gt;</code><code x-show="active === 'spinner3'">&lt;div class="relative"&gt;
  &lt;div class="h-16 w-16 rounded-full border-4 border-gray-200"&gt;&lt;/div&gt;
  &lt;div class="absolute top-0 left-0 h-16 w-16 animate-spin rounded-full 
       border-4 border-solid border-blue-600 border-t-transparent"&gt;&lt;/div&gt;
&lt;/div&gt;</code><code x-show="active === 'spinner4'">&lt;div class="inline-block animate-spin text-blue-600"&gt;
  &lt;ion-icon name="sync-outline" class="text-5xl"&gt;&lt;/ion-icon&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-top: 0;
}

button {
  background: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

console.log('Editor loaded!');

let clickCount = 0;

function handleClick() {
  clickCount++;
  const output = document.getElementById('output');
  output.innerHTML = `
    <h3>Clicked ${clickCount} time(s)!</h3>
    <p>Time: ${new Date().toLocaleTimeString()}</p>
  `;
  console.log(`Button clicked ${clickCount} times`);
}

Comments (0)

No comments yet. Be the first!