HTML Code
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<link href=”code test 4.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div class=”progress container”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS Code
.progress{
height: 40px;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -50px;
}
.progress span{
transition: all 500ms ease;
background: #FFFFFF;
box-shadow: 1px 2px 3px #999;
height: 10px;
width: 10px;
display: inline-block;
border-radius: 10px;
animation: wave 2s ease infinite;
}
.progress span:nth-child(1){ animation-delay: 0; }
.progress span:nth-child(2){ animation-delay: 100ms; }
.progress span:nth-child(3){ animation-delay: 200ms; }
.progress span:nth-child(4){ animation-delay: 300ms; }
.progress span:nth-child(5){ animation-delay: 400ms; }
.progress span:nth-child(6){ animation-delay: 500ms; }
.progress span:nth-child(7){ animation-delay: 600ms; }
.progress span:nth-child(8){ animation-delay: 700ms; }
@keyframes wave{
0%, 40%, 100% {
transform: translate(0, 0);
background-color: #FF7000;
}
10% {
transform: translate(0px, -3px);
background-color: white;
}
}@charset “utf-8”;
/* CSS Document */
Original Code by Arjun Raj
https://codepen.io/rajarju/pen/pFrIt
