Build a simple card skeleton loader component using HTML and CSS.
Tags: css, beginners, tutorial, webdev
Published: 2021-03-08 08:40:31

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bskjx6ao3cqx64cn5l2.gif)

# 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
``` HTML
<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>
```
### 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')

``` HTML
<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>
```

# Step 2 - Adding the common styles for the card and the skeleton.
(For the consistent look)

``` CSS
    .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;
    }
```

# Step 3 - Adding the Card-specific styles.
(Font sizes, colors, etc)

``` CSS
    .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;
    }
```

# Step 4 - Adding the skeleton specific styles
(Here, we will specify the height, width, and background color of the skeletons.)

``` CSS
.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;
    }
```
**Now The card and the skeleton should look like this**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3x0u8u4wxi0ss9dt76q.png)

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

# Step 5 - Adding the animation

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

        50% {
            background-color: #CBD5E1;
        }

        100% {
            background-color: #94A3B8;
        }
    }
```
**Now we can add this animation on all the skeletons and remove the background color.**

``` CSS
// 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;
    }
``` 
**Final Demo**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bskjx6ao3cqx64cn5l2.gif)

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