How to Create Loading Skeleton/Shimmer in TailwindCSS

Loading Skeleton or Shimmer are everywhere nowadays. All the big companies like Facebook and Linkedin are using them to have a nice user experience. Using TailwindCSS, you can easily create a loading skeleton/shimmer for your web pages. There are 2 steps in designing a basic loading skeleton.

Creating Loading Skeleton/Shimmer in TailwindCSS

First, you have to create a static skeleton that doesn’t move at all. You can do it with gray colors available in TailwindCSS. Here is a simple static user card skeleton with gray colors. You can check the basic structure demo on tailwind play.

This static skeleton will look like the screenshot below.

Adding Animation to Skeleton

Now, you need to add just one class that will do everything for you. Add the class animate-pulse that adds animations for creating a loading effect. The following code will create a complete loading effect for the skeleton. You can check the working demo online to see the effect.

Conclusion

You can add a simple loading skeleton in TailwindCSS by creating a static skeleton and adding animate-pulse class. This is very useful to increase the user experience on the website.