How to Create Skeleton Screen Loading Effect using CSS ?

Last Updated : 29 Apr, 2020

The skeleton screens are used to indicate that the content is loading. They are also called splash screens. This is a part of the modern design trend. The skeleton screens are better than the loading spinners in some cases. It is used by many big companies like Facebook, Google, etc.

HTML Code: In this section, we will create a basic structure of loading page screen skeleton. To create a loading page skeleton, we need to use <div> element where we will display the content. We will add a loading class to each element inside the card which we will remove when the content is loaded.

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        How to Create Skeleton Screen 
        Loading Effect using CSS? 
    </title> 
</head> 
  
<body> 
    <div class="card"> 
        <div class="card__image loading"></div> 
        <div class="card__title loading"></div> 
        <div class="card__description loading"></div> 
    </div> 
</body> 
  
</html> 

CSS Code: In this section, we will use some CSS property to create a loading page screen skeleton.

<style> 
  
    /* Card styles */
    .card{ 
        background-color: #fff; 
        height: auto; 
        width: auto; 
        overflow: hidden; 
        margin: 12px; 
        border-radius: 5px; 
        box-shadow: 9px 17px 45px -29px
                    rgba(0, 0, 0, 0.44); 
    } 
   
    /* Card image loading */
    .card__image img { 
        width: 100%; 
        height: 100%; 
    } 
      
    .card__image.loading { 
        height: 300px; 
        width: 400px; 
    } 
   
    /* Card title */
    .card__title { 
        padding: 8px; 
        font-size: 22px; 
        font-weight: 700; 
    } 
      
    .card__title.loading { 
        height: 1rem; 
        width: 50%; 
        margin: 1rem; 
        border-radius: 3px; 
    } 
   
    /* Card description */
    .card__description { 
        padding: 8px; 
        font-size: 16px; 
    } 
      
    .card__description.loading { 
        height: 3rem; 
        margin: 1rem; 
        border-radius: 3px; 
    } 
   
    /* The loading Class */
    .loading { 
        position: relative; 
        background-color: #e2e2e2; 
    } 
   
    /* The moving element */
    .loading::after { 
        display: block; 
        content: ""; 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        transform: translateX(-100%); 
        background: -webkit-gradient(linear, left top, 
                    right top, from(transparent),  
                    color-stop(rgba(255, 255, 255, 0.2)), 
                    to(transparent)); 
                      
        background: linear-gradient(90deg, transparent, 
                rgba(255, 255, 255, 0.2), transparent); 
   
        /* Adding animation */
        animation: loading 0.8s infinite; 
    } 
   
    /* Loading Animation */
    @keyframes loading { 
        100% { 
            transform: translateX(100%); 
        } 
    } 
</style> 

Note: The loading class has a pseudo-element that moves from left to right in order to mimic animation.

JavaScript Code: Now, when the content loaded, we can remove the loading class from each element and add the content to the appropriate place.

<script> 
    const title = document.querySelector(".card__title"); 
    const description = document.querySelector(".card__description"); 
    const image = document.querySelector(".card__image"); 
      
    // Remove the 'loading' class 
    title.classList.remove("loading"); 
    description.classList.remove("loading"); 
    image.classList.remove("loading"); 
      
    // Add the content 
    title.textContent = 'Title'; 
    description.textContent = 'This is the description.'; 
    image.innerHTML = `<img src="${image-source}`; 
</script> 

Complete Code: In this section, we will combine the above two sections (HTML and CSS code) to create Skeleton Screen Loading Effect. If JavaScript code is added then the skeleton is replaced by the data.

Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        How to Create Skeleton Screen 
        Loading Effect using CSS? 
    </title> 
      
    <style> 
  
        /* Card styles */ 
        .card{ 
            background-color: #fff; 
            height: auto; 
            width: auto; 
            overflow: hidden; 
            margin: 12px; 
            border-radius: 5px; 
            box-shadow: 9px 17px 45px -29px 
                        rgba(0, 0, 0, 0.44); 
        } 
       
        /* Card image loading */ 
        .card__image img { 
            width: 100%; 
            height: 100%; 
        } 
          
        .card__image.loading { 
            height: 300px; 
            width: 400px; 
        } 
       
        /* Card title */ 
        .card__title { 
            padding: 8px; 
            font-size: 22px; 
            font-weight: 700; 
        } 
          
        .card__title.loading { 
            height: 1rem; 
            width: 50%; 
            margin: 1rem; 
            border-radius: 3px; 
        } 
       
        /* Card description */ 
        .card__description { 
            padding: 8px; 
            font-size: 16px; 
        } 
          
        .card__description.loading { 
            height: 3rem; 
            margin: 1rem; 
            border-radius: 3px; 
        } 
       
        /* The loading Class */ 
        .loading { 
            position: relative; 
            background-color: #e2e2e2; 
        } 
       
        /* The moving element */ 
        .loading::after { 
            display: block; 
            content: ""; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            transform: translateX(-100%); 
            background: -webkit-gradient(linear, left top, 
                        right top, from(transparent),  
                        color-stop(rgba(255, 255, 255, 0.2)), 
                        to(transparent)); 
                          
            background: linear-gradient(90deg, transparent, 
                    rgba(255, 255, 255, 0.2), transparent); 
       
            /* Adding animation */ 
            animation: loading 0.8s infinite; 
        } 
       
        /* Loading Animation */ 
        @keyframes loading { 
            100% { 
                transform: translateX(100%); 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <div class="card"> 
        <div class="card__image loading"></div> 
        <div class="card__title loading"></div> 
        <div class="card__description loading"></div> 
    </div> 
</body> 
  
</html> 