Home
OmKar Mehta
Skeleton loader for article card

Skeleton loader for article card

This tailwind example is contributed by OmKar Mehta, on 04-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Content loader, Shimmer, Ghost element, Content placeholder

Skeleton loader

Author OmKar Mehta

1.9k

3

Fork Fullscreen

<div class="flex min-h-screen flex-col justify-center bg-gray-900 py-12 px-4">
  <div class="relative bg-white p-4  shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg rounded-lg">
    <div class="m-2 max-w-sm animate-pulse">
      <div class="flex items-center justify-center h-48 w-full bg-gray-300 dark:bg-gray-700 sm:w-96">
        <svg class="h-12 w-12 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" aria-hidden="true"
          fill="currentColor" aria-label="Loading Icon">
          <path
            d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" />
        </svg>
      </div>
      <div class="h-8 w-48 mb-4 mt-2 rounded-full bg-gray-200 dark:bg-gray-700"></div>
      <div class="h-2 max-w-[360px] mb-2.5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
      <div class="h-6 rounded-full mb-2.5 bg-gray-200 dark:bg-gray-700"></div>
      <div class="h-6 max-w-[330px] rounded-full mb-2.5 bg-gray-200 dark:bg-gray-700"></div>
      <div class="h-7 max-w-[50px] rounded-full mb-2.5 bg-gray-200 dark:bg-gray-700"></div>
    </div>
    <div class="flex items-center">
      <svg class="h-16 w-16 mr-1 animate-pulse text-gray-200 dark:text-gray-700" viewBox="0 0 20 20"
        xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" aria-label="User Icon">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" />
      </svg>
      <div class="flex flex-col gap-2 animate-pulse">
        <div class="h-3 w-48 rounded-full bg-gray-200 dark:bg-gray-700"></div>
        <div class="h-2 w-46 rounded-full bg-gray-200 dark:bg-gray-700"></div>
      </div>
    </div>
  </div>
</div>

<style>
  .mask {
    mask-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0));
  }
</style>

Related Examples

Skeleton loading for blog post
full page skeleton loader

Author:
Ahmed Malik

1 year ago

9.6k
Skeleton loader for profile card

Author:
Lukas Müller

1 year ago

7.5k
Skeleton loader for card sample
This tailwind example is contributed by Bishnu Thapa, on 15-Apr-2024. Component is made with Tailwind CSS v3.4. It's responsive.

Author:
Bishnu Thapa

7 months ago

1.1k
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.

Author:
Alok

2 years ago

9k
Profile card skeleton loading

Author:
Kris Showen

1 year ago

11k
Skeleton loader for card

Author:
Lukas Müller

1 year ago

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

Author:
Anja Müller

1 year ago

6.6k
Skeleton loading card horizontal

Author:
Ahmed Malik

1 year ago

12.2k
404 Not Found Page

Author:
Maxim

2 months ago

171
Blog items skeleton

Author:
Nii Anyetei

3 months ago

732
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

6 months ago

1k
File input

Author:
Anonymous

11 months ago

5.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8