How to Create Skeleton Screen Loading Effect using CSS ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Passionate Programmer💻, Engineering student, Machine Learning Enthusiast and a Fond of Cricket🏏

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.