As telas de esqueleto são usadas para indicar que o conteúdo está sendo carregado. Eles também são chamados de telas iniciais. Isso faz parte da tendência do design moderno. As telas de esqueleto são melhores do que os spinners de carregamento em alguns casos. É usado por muitas grandes empresas como Facebook, Google, etc.

Código HTML: nesta seção, criaremos uma estrutura básica para o esqueleto da tela da página de carregamento. Para criar um esqueleto de página de carregamento, precisamos usar o elemento <div> onde exibiremos o conteúdo. Adicionaremos uma loadingclasse a cada elemento dentro do cartão, que removeremos quando o conteúdo for carregado.

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

Código CSS: nesta seção, usaremos algumas propriedades CSS para criar um esqueleto de tela da página de carregamento.

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

Observação: a loading classe possui um pseudoelemento que se move da esquerda para a direita para imitar a animação.

Código JavaScript: Agora, quando o conteúdo é carregado, podemos remover a loadingclasse de cada elemento e adicionar o conteúdo ao local apropriado.

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

Código completo: nesta seção, combinaremos as duas seções acima (código HTML e CSS) para criar o efeito de carregamento da tela de esqueleto. Se o código JavaScript for adicionado, o esqueleto será substituído pelos dados.

Exemplo:

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


Saída: