How To Create Skeleton Loading Screen Animation Using Only HTML & CSS.

0
Create Skeleton Loading Screen

Hello reader, today in this blog you will learn How To Create Skeleton Loading Screen Animation Using Only HTML & CSS. Earlier, I shared a blog on How To Create A Responsive Mega Menu And Dropdown Menu Using Only HTML & CSS and now it’s time to Create Skeleton Loading Screen Animation.

What is a skeleton loading screen?

A skeleton loading screen is the user interface (UI) that has no actual content; Instead, it animates the page layout by displaying its elements as it loads and preps, similar to the actual content.

In this program [Skeleton Loading Screen Animation] on the website, the skeleton loader is indicated by its element shape. This is a pure CSS program so this skeleton screen will not load the actual content, but you can easily view your content by removing this skeleton layer when the content is fully loaded.

You Might This Blog:

To Create Skeleton Loading Screen Animation follow these Steps:

Step 1

To create this program: ( Skeleton Loading Screen Animation ). Initially you need to create two files one HTML (.html) and another CSS file (.css). After creating these files, just paste the following codes into your VS IDE code sample and create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<!DOCTYPE html>
<!-- Created By CodeWithNepal - www.codewithnepal.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skeleton Loading Animation | CodeWithNepal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="img"></div>
      <div class="details">
        <span class="name"></span>
        <span class="about"></span>
      </div>
    </div>
    <div class="description">
      <div class="line line-1"></div>
      <div class="line line-2"></div>
      <div class="line line-3"></div>
    </div>
    <div class="btns">
      <div class="btn btn-1"></div>
      <div class="btn btn-2"></div>
    </div>
  </div>
</body>
</html>

Step 2

And, create a CSS file named style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
  }
  body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color:slateblue;
  }
  .card{
    max-width: 350px;
    width: 100%;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
  }
  .card .header{
    display: flex;
    align-items: center;
  }
  .header .img{
    height: 75px;
    width: 75px;
    background: #d9d9d9;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
  .header .details{
    margin-left: 20px;
  }
  .details span{
    display: block;
    background: #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
  }
  .details .name{
    height: 15px;
    width: 100px;
  }
  .details .about{
    height: 13px;
    width: 150px;
    margin-top: 10px;
  }
  .card .description{
    margin: 25px 0;
  }
  .description .line{
    background: #d9d9d9;
    border-radius: 10px;
    height: 13px;
    margin: 10px 0;
    overflow: hidden;
    position: relative;
  }
  .description .line-1{
    width: calc(100% - 15%);
  }
  .description .line-3{
    width: calc(100% - 40%);
  }
  .card .btns{
    display: flex;
  }
  .card .btns .btn{
    height: 45px;
    width: 100%;
    background: #d9d9d9;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
  }
  .btns .btn-1{
    margin-right: 8px;
  }
  .btns .btn-2{
    margin-left: 8px;
  }
  .header .img::before,
  .details span::before,
  .description .line::before,
  .btns .btn::before{
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, #d9d9d9 0%, rgba(0,0,0,0.05) 20%, #d9d9d9 40%, #d9d9d9 100%);
    background-repeat: no-repeat;
    background-size: 450px 400px;
    animation: shimmer 1s linear infinite;
  }
  .header .img::before{
    background-size: 650px 600px;
  }
  .details span::before{
    animation-delay: 0.2s;
  }
  .btns .btn-2::before{
    animation-delay: 0.22s;
  }
  @keyframes shimmer {
    0%{
      background-position: -450px 0;
    }
    100%{
      background-position: 450px 0;
    }
  }

Output

Create Skeleton Loading Screen

LEAVE A REPLY

Please enter your comment!
Please enter your name here