DEV Community

Ankit Verma
Ankit Verma

Posted on

Create “Loading Dots” Animations in Tailwind CSS

#webdev #tailwindcss #javascript #scc

When you want to show a loading state, a simple spinner is common, but sometimes it feels too generic. Animated dots are a cleaner, friendlier alternative that users often see in chat apps, dashboards, and status bars.

In this tutorial, we’ll build two types of loading dot animations in Tailwind CSS:

  1. Appending dots (Loading. → Loading.. → Loading...)
  2. Bouncing dots (three dots bouncing one after another, like typing indicators)

1. Appending Dots Loader

Step 1: Extend Tailwind Config

In your tailwind.config.js, add a new keyframe animation for the dot cycle:

// tailwind.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        dotLoop: {
          '0%':   { content: '"."' },
          '25%':  { content: '".."'},
          '50%':  { content: '"..."'},
          '75%':  { content: '""' },
          '100%': { content: '"."' },
        },
      },
      animation: {
        dotLoop: 'dotLoop 1.5s steps(1,end) infinite',
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

👉 Here we animate the content property. Using steps(1,end) ensures the dots jump instantly rather than fading.

Step 2: Add to Your HTML

Now just use a <span> with Tailwind’s after: utilities:

<span class="text-blue-600 font-medium">
  Loading<span class="after:animate-dotLoop"></span>
</span>
Enter fullscreen mode Exit fullscreen mode

✅ Output:

Loading.
Loading..
Loading...
Loading
Loading.
Enter fullscreen mode Exit fullscreen mode

Step 3: Variations

  • Make it slower: 
  dotLoop: 'dotLoop 2s steps(1,end) infinite'
Enter fullscreen mode Exit fullscreen mode
  • Change color: wrap with text-green-600 or text-red-500.
  • Reuse in buttons, modals, or table footers.

2. Bouncing Dots Loader

This one looks like chat “typing indicators”.

Step 1: Tailwind Config

Add three staggered bounce animations:

// tailwind.config.js
export default {
  theme: {
    extend: {
      keyframes: {
        bounceDot: {
          '0%, 80%, 100%': { transform: 'scale(0)' },
          '40%': { transform: 'scale(1)' },
        },
      },
      animation: {
        bounceDot1: 'bounceDot 1.4s infinite ease-in-out',
        bounceDot2: 'bounceDot 1.4s infinite ease-in-out 0.2s',
        bounceDot3: 'bounceDot 1.4s infinite ease-in-out 0.4s',
      },
    },
  },
};
Enter fullscreen mode Exit fullscreen mode

Step 2: HTML Loader 

<div class="flex space-x-1">
  <span class="w-2 h-2 bg-gray-600 rounded-full animate-bounceDot1"></span>
  <span class="w-2 h-2 bg-gray-600 rounded-full animate-bounceDot2"></span>
  <span class="w-2 h-2 bg-gray-600 rounded-full animate-bounceDot3"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

✅ Output:

Three small dots bounce one after another in a loop. Perfect for chat-like “typing…” states.

3. When to Use Which

  • Appending Dots → Great for inline text loaders (Loading..., Fetching data...).
  • Bouncing Dots → Better for visual indicators like chats, buttons, or waiting screens.

🎉 Final Thoughts

With just a few lines in tailwind.config.js and minimal HTML, you can create smooth, reusable, and modern loading animations in Tailwind CSS.

Try mixing both approaches depending on your UI needs!

Top comments (0)