<div class="container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
body {
display:flex;
justify-content:center;
margin-top:5rem;
}
.container{
background-color:#eee;
padding: 1.5rem 0.8rem 0.8rem 0.8rem;
border-radius:5px;
}
.dot {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #4b9cdb;
}
.container .dot:nth-last-child(1) {
animation: jumpingAnimation 1.2s 0.6s linear infinite;
}
.container .dot:nth-last-child(2) {
animation: jumpingAnimation 1.2s 0.3s linear infinite;
}
.container .dot:nth-last-child(3) {
animation: jumpingAnimation 1.2s 0s linear infinite;
}
@keyframes jumpingAnimation {
0 {
transform: translate(0, 0);
}
16% {
transform: translate(0, -15px);
}
33% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.