<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
100vw;
height: 100vh;
background-color: #323232;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
100vw;
height: 300px;
background-color: #efefef;
}
.loading {
font-size: 0;
}
.dot {
position: absolute;
display: inline-block;
10px;
height: 10px;
margin: 5px;
border-radius: 50%;
background-color: tomato;
}
#dot_one {
background-color: rgb(247, 125, 103);
animation: dot_circle 2s infinite;
animation-delay: -0.s;
}
#dot_two {
background-color: rgb(70, 219, 145);
animation: dot_circle 2s infinite;
animation-delay: -0.4s;
}
#dot_three {
background-color: rgb(209, 102, 191);
animation: dot_circle 2s infinite;
animation-delay: -0.6s;
}
#dot_four {
background-color: rgb(58, 106, 196);
animation: dot_circle 2s infinite;
animation-delay: -0.8s;
}
#dot_five {
background-color: rgb(255, 71, 71);
animation: dot_circle 2s infinite;
animation-delay: -1s;
}
@keyframes dot_circle {
/* two-points-trace */
/* 0% {
transform: translate(-30px, 0);
}
50% {
transform: translate(30px, 0);
}
100% {
transform: translate(-30px, 0);
} */
/* three-points-trace */
/* 0% {
transform: translate(30px, 0);
}
33% {
transform: translate(0, 51.96px);
}
66% {
transform: translate(-30px, 0);
}
100% {
transform: translate(30px, 0);
} */
/* four-points-trace */
/* 0% {
transform: translate(30px, 0);
}
25% {
transform: translate(30px, 60px);
}
45% {
transform: translate(-30px, 60px);
}
75% {
transform: translate(-30px, 0);
}
100% {
transform: translate(30px, 0);
} */
0% {
transform: rotate(0deg) translate(-30px) rotate(0deg);
}
100% {
transform: rotate(360deg) translate(-30px) rotate(-360deg);
}
}
</style>
<section>
<div class="container">
<div class="loading">
<div class="dot" id="dot_one"></div>
<div class="dot" id="dot_two"></div>
<div class="dot" id="dot_three"></div>
<div class="dot" id="dot_four"></div>
<div class="dot" id="dot_five"></div>
</div>
</div>
</section>
</body>
</html>