Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)

Last updated on May 13, 2022 Pennywise Loading... Post a comment

The example below shows you how to create skeleton loading placeholders with Tailwind CSS. The main point here is to use the animate-pulse utility class to make things shimmer.

Example Preview:

The code:

<body class="p-20">
    <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="w-full bg-white drop-shadow-md rounded-lg">
            <div class="animate-pulse w-full h-48 bg-slate-200"></div>
            <div class="p-3 space-y-4">
                <div class="animate-pulse w-2/3 h-6 bg-slate-200"></div>
                <div class="flex space-x-4">
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                </div>
                <div class="space-y-2">
                    <div class="animate-pulse w-3/4 h-3 bg-slate-200"></div>
                    <div class="animate-pulse w-full h-3 bg-slate-200"></div>
                    <div class="animate-pulse w-2/3 h-3 bg-slate-200"></div>
                </div>
            </div>
        </div>

        <div class="w-full bg-white drop-shadow-md rounded-lg">
            <div class="animate-pulse w-full h-48 bg-slate-200"></div>
            <div class="p-3 space-y-4">
                <div class="animate-pulse w-2/3 h-6 bg-slate-200"></div>
                <div class="flex space-x-4">
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                </div>
                <div class="space-y-2">
                    <div class="animate-pulse w-3/4 h-3 bg-slate-200"></div>
                    <div class="animate-pulse w-full h-3 bg-slate-200"></div>
                    <div class="animate-pulse w-2/3 h-3 bg-slate-200"></div>
                </div>
            </div>
        </div>

        <div class="w-full bg-white drop-shadow-md rounded-lg">
            <div class="animate-pulse w-full h-48 bg-slate-200"></div>
            <div class="p-3 space-y-4">
                <div class="animate-pulse w-2/3 h-6 bg-slate-200"></div>
                <div class="flex space-x-4">
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                    <div class="animate-pulse w-1/3 h-3 bg-sky-200"></div>
                </div>
                <div class="space-y-2">
                    <div class="animate-pulse w-3/4 h-3 bg-slate-200"></div>
                    <div class="animate-pulse w-full h-3 bg-slate-200"></div>
                    <div class="animate-pulse w-2/3 h-3 bg-slate-200"></div>
                </div>
            </div>
        </div>
    </div>
</body>

You can modify and improve the code to make it fit your needs. Continue learning more about Tailwind CSS by taking a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like