How To Make Skeleton Loading Animation With CSS

February 28, 2022June 4, 2022 M-SoftTech 0 Comments

Hello viewer, in this article I will teach you how to make Skeleton Loading animation help of CSS and html. you have read many articles for skeleton loading animation. but this article is totally different because I will make skeleton loading animation is help of html CSS.

How to Make Battery Charging Animation with HTML CSS

I will not use any JavaScript language and jQuery. so, it is very simple and very useful project for beginner. I have used bootstrap file in this project. you can see the link in below code. I have mention it in code. so let’s start the project you can copy the below code in your html document.

How to Create A full Website design Using HTML & CSS | Make Full Website All Pages

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css">
</head>
<body>

<div class="container">
	<div class="row">
		<div class="col">
			<div class="card my-5 mx-auto" style="width: 18rem;">
				<div class="card-img-top embed-responsive embed-responsive-16by9">
					<div class="embed-responsive-item shimmer"></div>
				</div>

				<div class="card-body">
					<h5 class="card-title shimmer"></h5>
					<p class="card-text shimmer"></p>
				</div>
			</div>
		</div>

		<div class="col">
			<div class="card my-5 mx-auto" style="width: 18rem;">
				<div class="card-img-top embed-responsive embed-responsive-16by9">
					<div class="embed-responsive-item shimmer"></div>
				</div>

				<div class="card-body">
					<h5 class="card-title shimmer"></h5>
					<p class="card-text shimmer"></p>
				</div>
			</div>
		</div>

		<div class="col">
			<div class="card my-5 mx-auto" style="width: 18rem;">
				<div class="card-img-top embed-responsive embed-responsive-16by9">
					<div class="embed-responsive-item shimmer"></div>
				</div>

				<div class="card-body">
					<h5 class="card-title shimmer"></h5>
					<p class="card-text shimmer"></p>
				</div>
			</div>
		</div>
	</div>
</div>



</body>
</html>

Copy the below code in your CSS Documents

CSS Code

body{
  background: linear-gradient(to right, #f45C43, #eb3349)!important;
}
.row{
  margin-top: 15%;
}
.shimmer{
  animation: an 1s infinite;
  animation-timing-function: linear;
  background: #f6f7f8;
 background: linear-gradient(to right, rgba(0, 0, 0, 0.07) 8%, 
  rgba(0, 0, 0, 0.13) 18%, 
  rgba(0, 0, 0, 0.07) 33%);
  background-size: 200% 100px;
  background-attachment: fixed;
}
p.shimmer,
span.shimmer,
.shimmer.card-title,
.shimmer.btn{
  color: transparent;
  background: none;
  border: none;
}
p.shimmer:before,
span.shimmer:before,
.shimmer.card-title:before,
.shimmer.btn:before{
  animation: an 1s infinite;
  animation-timing-function: linear;
  background: #f6f7f8;
   background: linear-gradient(to right, rgba(0, 0, 0, 0.07) 8%, 
  rgba(0, 0, 0, 0.13) 18%, 
  rgba(0, 0, 0, 0.07) 33%);
  background-size: 200% 100px;
  background-attachment: fixed;
  color: transparent;
  display: inline;
  line-height: 2em;
}
.shimmer.card-title:before{
  content: "Lorem Ipsum";
}
span.shimmer:before{
  content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the";
}
p.shimmer:before{
  content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the";
}
.shimmer.btn:before{
  content: "lorem ipsum is";
}
@keyframes an{
  0%{
    background-position: 100% 0;
  }
  100%{
    background-position: -100% 0;
  }
}

you also watch a video tutorial How To Create Skeleton Loading Animation With CSS