Product page Skeleton Loading Screen

This tailwind example is contributed by Anonymous, on 06-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Content loader, Shimmer, Ghost element, Content placeholder

Skeleton loader

Author Anonymous

Tailwind v3.4 2k 2

Fork Fullscreen

<div class="animate-pulse">
    <div class="h-6 bg-gray-300 rounded w-1/4 mb-6"></div>
  </div>

<div class="animate-pulse">
    <div class="w-full h-64 bg-gray-300 rounded mb-6"></div>
  </div>

<div class="animate-pulse space-y-2">
    <div class="h-4 bg-gray-300 rounded w-full"></div>
    <div class="h-4 bg-gray-300 rounded w-5/6"></div>
    <div class="h-4 bg-gray-300 rounded w-4/6"></div>
  </div>

<div class="mt-6 animate-pulse space-y-3">
    <div class="h-4 bg-gray-300 rounded w-1/2"></div>
    <div class="h-4 bg-gray-300 rounded w-3/4"></div>
    <div class="h-4 bg-gray-300 rounded w-2/3"></div>
    <div class="h-4 bg-gray-300 rounded w-5/6"></div>
  </div>

<div class="mt-8 space-y-4">
    
    <div class="animate-pulse flex space-x-4">
      <div class="h-10 w-10 bg-gray-300 rounded-full"></div>
      <div class="h-10 w-10 bg-gray-300 rounded-full"></div>
      <div class="h-10 w-10 bg-gray-300 rounded-full"></div>
      <div class="h-10 w-10 bg-gray-300 rounded-full"></div>
    </div>
    
    <div class="animate-pulse flex space-x-4">
      <div class="h-10 w-16 bg-gray-300 rounded"></div>
      <div class="h-10 w-16 bg-gray-300 rounded"></div>
      <div class="h-10 w-16 bg-gray-300 rounded"></div>
    </div>
  </div>
</div>

Related Examples

Card placeholder
Skeleton Loader for card. This Tailwind component simulates a loading state for content cards. It includes a circular placeholder for an image or avatar and placeholder text for titles and descriptions.

Alok

3 years ago

11.5k
Skeleton loader for profile card

Lukas Müller

3 years ago

10.4k
Skeleton loader for card

Lukas Müller

3 years ago

11.6k
404 Not Found Page

Maxim

2 years ago

2k
Skeleton loader for Blog post and Article card
content placeholder for cards

Anja Müller

3 years ago

8.7k
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Anonymous

1 year ago

884
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Abhiraj

1 year ago

3.5k
Skeleton loading for blog post
full page skeleton loader

Ahmed Malik

3 years ago

11.8k
Cockatoo

Lokesh H

1 month ago

71
Profile card skeleton loading

Kris Showen

3 years ago

12.9k
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Anonymous

1 year ago

1.1k
SCROLL ABAJO
para poner que a llegado al final de la pagina

Raul antonio de la cruz hernandez

1 year ago

1.3k