Step 1) Add HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>css loading tutorial</h1>
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Step 2) Add CSS CODE IN style tag​
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background:#3097bf
}
h1{
text-align:center;
text-decoration:underline;
text-transform: uppercase;
letter-spacing:5px;
font-family: Rockwell;
margin-top:50px;
color:#e1cf79;
}
.loader{
position:absolute;
top:50%;
left:50%;
}
.loader span{
display: inline-block;
width:5px;
height:50px;

background-color:white;
}

.loader span:nth-child(1){
animation: loading 1s ease-in-out infinite;
}
.loader span:nth-child(2){
animation: loading 1s ease-in-out 0.10s infinite;
}
.loader span:nth-child(3){
animation: loading 1s ease-in-out 0.20s infinite;
}
.loader span:nth-child(4){
animation: loading 1s ease-in-out 0.30s infinite;
}
.loader span:nth-child(5){
animation: loading 1s ease-in-out 0.40s infinite;
}
.loader span:nth-child(6){
animation: loading 1s ease-in-out 0.50s infinite;
}
@keyframes loading {
0%, 100%{
transform:scaleY(1);
}
50%{
transform:scaleY(1.8);
}

}
</style>

</head>