How to create a Skeleton Loader in Tailwindcss ?

#tailwindcss #html #css

In this tutorial we are going to see how to make skeleton loaders in tailwind. Skeleton Loaders are used show the loading state. Many big websites such as youtube, linkedIn and even dev.to uses such loaders while loading the data!

Here we are going to create a Loader Like below:

The simple code in html is below:



<div class="w-60 h-24 border-2 rounded-md mx-auto mt-20">
  <div class="flex animate-pulse flex-row items-center h-full justify-center space-x-5">
    <div class="w-12 bg-gray-300 h-12 rounded-full ">
    </div>
        <div class="flex flex-col space-y-3">
        <div class="w-36 bg-gray-300 h-6 rounded-md ">
        </div>
        <div class="w-24 bg-gray-300 h-6 rounded-md ">
        </div>
    </div>
  </div>
</div>

Here we have simply created a div with the border in which we have a 3 solid div. We have given the gray-300 color to those div.

So far nothing Special!
Wait but how to create that pulse effect 🤔? Do not worry we have tailwind thats it! In Tailwindcss we have animation class called as animate-pulse which give the effect we needed.

Here is the tailwind playground.

Isn't it simple? If you find useful like and share😇.
Any thoughts comment below👇.

connnect us:
Twitter : @job_pick
Website : jobpick.in - Frontend Developer Jobs Board