In this tutorial, we’ll look at creating a skeleton loading in Tailwind CSS. Skeleton Loaders are used to demonstrate the loading state.
Many large websites, including YouTube, LinkedIn, and Facebook, use skeleton loaders when loading data!
Here, we will create a Loader as shown below:
The following code snippet shows the above skeleton loader component.
<div class="h-24 mx-auto mt-20 border rounded-md w-60"> <div class="flex flex-row items-center justify-center h-full space-x-5 animate-pulse"> <div class="w-12 h-12 bg-gray-200 rounded-full "></div> <div class="flex flex-col space-y-3"> <div class="h-6 bg-gray-200 rounded w-36 "></div> <div class="w-24 h-6 bg-gray-200 rounded "></div> </div> </div> </div>
The demo of the skeleton loading in Tailwind CSS is available here.
Here, we’ve created a div with a border that contains three divs. We assigned the gray-200 color to that DIVS.
But how do you get that pulsing effect? Tailwind CSS has an animation class called animate-pulse that provides the desired effect.
Read more: Create a skeleton loading animation with CSS.