Search

Create A Skeleton Screen Loader Using CSS

Updated: Dec 28, 2020



Skeleton Screens are used to create the loading effect on the screen while the content is being loaded.


Skeleton Screens can make an impact on the user that their content will be loading soon.

The Skeleton Screens is much better to use instead of the loading bar or loading spinners.

Many Big companies have started using skeleton screens on their website so that users have a good user experience.


Skeleton Screen can be made using simple HTML and CSS.


The Source code is given below.

  • HTML

Here we need to use different <div> tags to place where our content will be placed, We will add a loading class here, which we will remove once our content is completely loaded.


<body> 
 <div class="card"> 
 <div class="card_header">
 <div class="card_image loading">
 </div>
 <div class="card_name loading"></div>
 <div class="card_name_desc loading"></div>
 </div>
 <div class="card_description1 loading"></div> 
 <div class="card_description2 loading"></div> 
 </div> 
</body> 
  • CSS

Here we will add all the styles that we need to create a loading effect.

body {
 background: #383535;
 display: grid;
 justify-content: center;
}
/* Card styles */
.card {
 background-color: #fff;
 height: auto;
 width: auto;
 overflow: hidden;
 margin: 100px;
 border-radius: 5px;
 box-shadow: 9px 17px 45px -29px rgba(0, 0, 0, 0.44);
 display: grid;
 grid-template-rows: auto auto auto;
}
/* Card image loading */
.card_image img {
 height: 50px;
 width: 50px;
 margin: 10px;
 border-radius: 50%;
}
.card_header {
 height: 50px;
 width: 400px;
 margin: 10px;
 border-radius: 50%;
 grid-row-start: 1;
 grid-row-end: 2;
 grid-column-start: 1;
 grid-column-end: 4;
}
.card_image.loading {
 height: 50px;
 width: 50px;
 border-radius: 50%;
}
/*Card User name*/
.card_name {
 height: 10px;
 width: 100px;
 margin: -40px 0px 10px 70px;
 font-size: 10px;
}
.card_name.loading {
 height: 10px;
 width: 100px;
}
/*Card name Description*/
.card_name_desc {
 height: 10px;
 width: 150px;
 margin: 0px 0px 10px 70px;
 font-size: 10px;
}
.card_name_desc.loading {
 height: 10px;
 width: 150px;
 margin: 0px 0px 10px 70px;
}
/* Card description line 1 */
.card_description1 {
 margin: 10px;
 font-size: 14px;
 width: 400px;
 grid-row-start: 2;
 grid-row-end: 3;
 grid-column-start: 1;
 grid-column-end: 4;
}
.card_description1.loading {
 height: 7px;
 border-radius: 3px;
}
/* Card description line 2 */
.card_description2 {
 margin: 0px 10px 100px 10px;
 font-size: 14px;
 width: 390px;
 grid-row-start: 3;
 grid-row-end: 4;
 grid-column-start: 1;
 grid-column-end: 4;
}
.card_description2.loading {
 height: 7px;
 border-radius: 3px;
}
/* The loading Class */
.loading {
 position: relative;
 background-color: #d6d2d2;
}
/* 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
 );
 animation: loading 0.8s infinite;
}
/* Add Loading Animation */
@keyframes loading {
  100% {
 transform: translateX(100%);
 }
}

Result



7 views0 comments

Recent Posts

See All