DEV Community

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

Posted on

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

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πŸ™‚

Top comments (27)

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Nice job!

Collapse
 
devggaurav profile image
Gaurav

Thanks!

Collapse
 
maamiradina profile image
maamiradina

It's great job. Keep it up.

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
abdullaharik profile image
Abdullah ArΔ±k

Great

Collapse
 
devggaurav profile image
Gaurav

Thanks

Collapse
 
srijonsarkerdip profile image
srijonsarkardip

Fantastic Post!

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
rizkimcitra profile image
R. Maulana Citra

cool tutorial!, thank you so much

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
cboles profile image
Chris Boles

Love it and I understood it perfectly. Thank you.

Collapse
 
devggaurav profile image
Gaurav

Thank u!πŸ˜„

Collapse
 
martpoblet profile image
Martin Poblet

Nicee!

Collapse
 
ryanguitar profile image
Ryan Els

Real cool. Going to use it in my next project πŸ‘

Collapse
 
devggaurav profile image
Gaurav

Thank u😊

Collapse
 
viragdesai profile image
Virag Dilip Desai

Brilliant!

Collapse
 
devggaurav profile image
Gaurav

Thank u!

Collapse
 
dev_jero profile image
DJ Quispe

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

Collapse
 
devggaurav profile image
Gaurav

Thank u!😊

Some comments may only be visible to logged-in visitors. Sign in to view all comments.