The Tailwind Animations let us do a lot of fun and goofy things. Here’s a quick loader that uses a few divs and the Tailwind Animations.

<div class="min-h-screen flex justify-center items-center bg-black">

  <div class="loader bg-white p-5 rounded-full flex space-x-3">
    <div class="w-5 h-5 bg-gray-800 rounded-full animate-bounce"></div>
    <div class="w-5 h-5 bg-gray-800 rounded-full animate-bounce"></div>
    <div class="w-5 h-5 bg-gray-800 rounded-full animate-bounce"></div>
  </div>

</div>

.loader div {
  animation-duration: 0.5s;
}

.loader div:first-child {
  animation-delay: 0.1s;
}

.loader div:nth-child(2) {
  animation-delay: 0.3s;
}

.loader div:nth-child(3) {
  animation-delay: 0.6s;
}

https://codepen.io/chris__sev/pen/JjRqOxa?editors=1100
https://www.youtube.com/channel/UCmXVXfidLZQkppLPaATcHag

#tailwind css #tailwindcss