Skeleton Loading Screen Animation using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create Skeleton Loading Screen Animation using only HTML & CSS.
A skeleton loading screen is the user interface (UI) that doesn’t hold actual content; instead, it animates the page’s layout by showing its elements in shape similar to the actual content as it is loading and becoming ready.
In this program [Skeleton Loading Screen Animation], on the webpage, there is showing skeleton loader by its element shape. This is a pure CSS program, so this skeleton screen doesn’t load actual content but you can easily show your content by removing this skeleton layer when the content loaded completely. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Skeleton Loading Screen Animation].

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar - www.vikashtech.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <title>Skeleton Loading Animation | VikashTech</title> -->
    <link rel="stylesheet" href="blog.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>

CSS

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.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;
  }
}

Heart Shape Preloader in HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Heart Shape Preloader (Loader) using only HTML & CSS.
A preloader (also known as the loader) is an animation indicating the progress of a page-load in the background. Preloaders convince users that the website is running on loading the page. This can help enhance user experience and reduce the overall bounce rate.
Today in this blog, I’ll share you an Animated Heart Shape Preloader. This loader rotates 720deg infinitely. While this loader is active you can see there are two shapes of the loader, one shape is a round shape and another one is a heart shape. This loader changes or animates a round shape to heart shape smoothly while it’s rotating.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Heart Shape Preloader | VikashTech</title>
    <link rel="stylesheet" href="blog.css">
  </head>
  <body>
    <div class="container">
      <div class="preloader">
        <span></span>
        <span></span>
        <span></span>
      </div>
<div class="shadow">
</div>
</div>
</body>
</html>

CSS

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container .preloader{
  animation: rotate 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes rotate {
  50%{
    transform: rotate(360deg);
  }
  100%{
    transform: rotate(720deg);
  }
}
.preloader span{
  position: absolute;
  display: block;
  height: 64px;
  width: 64px;
  background: #3fc1f2;
  border: 1px solid #3fc1f2;
  border-radius: 100%;
}
.preloader span:nth-child(1){
  transform: translate(-28px, -28px);
  animation: shape_1 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_1 {
  60%{
    transform: scale(0.4);
  }
}
.preloader span:nth-child(2){
  transform: translate(28px, -28px);
  animation: shape_2 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_2 {
  40%{
    transform: scale(0.4);
  }
}
.preloader span:nth-child(3){
  position: relative;
  border-radius: 0px;
  transform: scale(0.98) rotate(-45deg);
  animation: shape_3 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shape_3 {
  50%{
    border-radius: 100%;
    transform: scale(0.5) rotate(-45deg);
  }
  100%{
    transform: scale(0.98) rotate(-45deg);
  }
}
.shadow{
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: 16px;
  width: 64px;
  border-radius: 50%;
  background-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  animation: shadow 2.3s cubic-bezier(0.75, 0, 0.5, 1) infinite;
}
@keyframes shadow {
  50%{
    transform: translateX(-50%) scale(0.5);
    border-color: #f2f2f2;
  }
}