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

649

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

8.9k
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

2 months ago

252
Skeleton loading card horizontal

Author:
Ahmed Malik

1 year ago

11.2k
Skeleton loader for card

Author:
Lukas Müller

1 year ago

9.5k
Skeleton loader for profile card

Author:
Lukas Müller

1 year ago

6.8k
Profile card skeleton loading

Author:
Kris Showen

1 year ago

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

Author:
Anja Müller

9 months ago

6.2k
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

1 year ago

8.5k
Tailwind invoice example

Author:
Elijah Davis

1 year ago

14.5k
Search bar with select
search bar like google with select filter

Author:
Cristian

1 month ago

662
Service Metrics cards

Author:
Paul Intay

4 months ago

790
Minimal Profile card

Author:
Abhijit Sen

1 year ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.6