DEV Community

loading...
Cover image for Build a simple card skeleton loader component using HTML and CSS.

Build a simple card skeleton loader component using HTML and CSS.

devggaurav profile image Gaurav ・3 min read

Hello everyone! In this tutorial, let's build a simple skeleton loader component using HTML and CSS. You can then use this component in your websites/apps as a fallback option before your main content loads.

Alt Text

Step 1. - HTML

We will create a card and its skeleton loader, so let's start with adding the HTML for both the card and the skeleton.

HTML for the card

<div class="card">
          <div>
              <img class="card-img" src='https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortWaved&accessoriesType=Prescription01&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=Blue03&eyeType=Default&eyebrowType=Default&mouthType=Twinkle&skinColor=Light'/>
          </div>
          <div class="card-text">
              <h2 class="card-title">Gaurav Gawade</h2>
              <p class="card-description">
                 <span>Lorem ipsum dolor sit amet consectetur, adipisicing eli.</span> 
              </p>
              <ul class="card-skills">
                  <li class="skill">UI Designer.</li>
                  <li class="skill">UX Designer.</li>
                  <li class="skill">Web Developer.</li>
              </ul>
              <a href="#" class="card-link">Read More</a>
          </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

HTML for the skeleton

(We are going to keep the basic structure the same as the card but we will remove the content. Also, change the classes on the elements')

<div class="skeleton">
          <div class="skeleton-img"></div>
          <div class="skeleton-text">
              <h2 class="skeleton-title"></h2>
              <p class="skeleton-description">
                <span></span>
                <span></span>
              </p>
              <ul class="skeleton-skills">
                  <li class="skill"></li>
                  <li class="skill"></li>
                  <li class="skill"></li>
              </ul>
              <a href="#" class="skeleton-link"></a>
          </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 2 - Adding the common styles for the card and the skeleton.

(For the consistent look)

    .card,
    .skeleton {
      display: flex;
      justify-content: space-around;
      padding: 20px;
      max-width: 400px;
      height: 155px;
      margin: 20px;
      border-radius: 10px;
      background-color: #E2E8F0;
      box-shadow:
        0 9px 33px rgba(0, 0, 0, 0.07);
    }


    .card-text, .skeleton-text{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 250px;
        margin-left: 10px;
    }


    .card-img, .skeleton-img{
        width: 75px;
        height: 75px;
        border-radius: 50%;
    }


    .card-description, .skeleton-description{
        margin: 10px 0;
    }


    .card-link, .skeleton-link{
        margin-top: 20px;
    }


    .card-skills , .skeleton-skills{
        display: flex;
        justify-content: space-between;
    }
Enter fullscreen mode Exit fullscreen mode

Step 3 - Adding the Card-specific styles.

(Font sizes, colors, etc)

    .card-img{
        background-color: #4F46E5;
    }

    .card-title{
        font-size: 16px;
        color: #334155;
    }

    .card-description{
        font-size: 12px;
        color: #64748B;
    }

    .card-skills .skill {
        font-size: 12px;
        font-weight: 600;
        color: #475569;
    }

    .card-link{
        font-size: 12px;
        color: #4F46E5;
    }
Enter fullscreen mode Exit fullscreen mode

Step 4 - Adding the skeleton specific styles

(Here, we will specify the height, width, and background color of the skeletons.)

.skeleton-img{
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-description span:nth-child(1){
        display: block;
        width: 210px;
        height: 10px;
        background-color: #94A3B8;
    }

    .skeleton-description span:nth-child(2){
        display: block;
        width: 150px;
        height: 10px;
        background-color: #94A3B8;
        margin-top: 5px;
    }

    .skeleton-skills .skill{
        width: 65px;
        height: 12px;
        background-color: #94A3B8;
    }

    .skeleton-link{
        width: 75px;
        height: 12px;
        background-color: #94A3B8;
    }
Enter fullscreen mode Exit fullscreen mode

Now The card and the skeleton should look like this

Alt Text

We are almost there! Now let's add the subtle animation on the skeletons

Step 5 - Adding the animation

    @keyframes pulse {
        0% {
            background-color: #94A3B8;
        }

        50% {
            background-color: #CBD5E1;
        }

        100% {
            background-color: #94A3B8;
        }
    }
Enter fullscreen mode Exit fullscreen mode

Now we can add this animation on all the skeletons and remove the background color.

// replace all styles from skeletons with these styles

    .skeleton-title{
        width: 150px;
        height: 12px;
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-img{
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-description span:nth-child(1){
        display: block;
        width: 210px;
        height: 10px;
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-description span:nth-child(2){
        display: block;
        width: 150px;
        height: 10px;
        animation: pulse 2s infinite ease-in-out;
        margin-top: 5px;
    }

    .skeleton-skills .skill{
        width: 65px;
        height: 12px;
        animation: pulse 2s infinite ease-in-out;
    }

    .skeleton-link{
        width: 75px;
        height: 12px;
        animation: pulse 2s infinite ease-in-out;
    }
Enter fullscreen mode Exit fullscreen mode

Final Demo

Alt Text

Hope you find this useful in some way. I apologize for my writing I am really bad at explaining code 😅
Thank u so much🙂

Discussion (27)

pic
Editor guide
Collapse
gedalyakrycer profile image
Gedalya Krycer

Nice job!

Collapse
devggaurav profile image
Gaurav Author

Thanks!

Collapse
maamiradina profile image
maamiradina

It's great job. Keep it up.

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
abdullaharik profile image
Collapse
devggaurav profile image
Collapse
srijonsarkerdip profile image
srijonsarkardip

Fantastic Post!

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
mlnzyx profile image
R. Maulana Citra

cool tutorial!, thank you so much

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
cboles profile image
Chris Boles

Love it and I understood it perfectly. Thank you.

Collapse
devggaurav profile image
Gaurav Author

Thank u!😄

Collapse
martpoblet profile image
Collapse
ryanguitar profile image
Ryan Els

Real cool. Going to use it in my next project 👍

Collapse
devggaurav profile image
Gaurav Author

Thank u😊

Collapse
viragdesai profile image
Virag Dilip Desai

Brilliant!

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
dev_jero profile image
DJ Quispe

Awesome, just what i need, thank you so much 😁!

Collapse
devggaurav profile image
Gaurav Author

Thank u!😊

Collapse
tonyboy78 profile image
Anton Marinov

Thanks for sharing that with us

Collapse
devggaurav profile image
Collapse
ptprashanttripathi profile image
Pt. Prashant tripathi

Hey Gaurav really liked your UI skills 👍, I have a offer for you, Check your mailbox.

Collapse
sidchaudhary04 profile image
Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
grateprice profile image
Grate Price

Nice Article Hear is all types of status quotes images are there are there visit Status Swag for more quotes on. punjabi status video

Collapse
chakudi profile image
Vaishali JS

Skeleton loaders are cool and trendy! 👍

Collapse
devggaurav profile image