Skip to content

Instantly share code, notes, and snippets.

@mrunkel
Created September 2, 2020 13:32
Show Gist options
  • Save mrunkel/06e11e30ae1c575e82310a7376e6a623 to your computer and use it in GitHub Desktop.
Save mrunkel/06e11e30ae1c575e82310a7376e6a623 to your computer and use it in GitHub Desktop.
Simple animation while waiting for an answer
#followingBalls {
position: relative;
height: 20px;
width: 256px;
margin: 50px auto;
display: block;
}
#followingBalls .ball {
background-color: #333;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 10px;
background-clip: padding-box;
animation-name: bounce;
animation-duration: 1.9s;
animation-iteration-count: infinite;
}
#followingBalls #ball-1 {
animation-delay: 0s;
}
#followingBalls #ball-2 {
animation-delay: 0.19s;
}
#followingBalls #ball-3 {
animation-delay: 0.38s;
}
#followingBalls #ball-4 {
animation-delay: 0.57s;
}
@keyframes bounce {
0% {
left: 0;
background-color: #333
}
50% {
left: 236px;
background-color: #eee
}
100% {
left: 0;
background-color: #333
}
}
<div id="followingBalls">
<div id="ball-1" class="ball"></div>
<div id="ball-2" class="ball"></div>
<div id="ball-3" class="ball"></div>
<div id="ball-4" class="ball"></div>
</div>
@mrunkel
Copy link
Author

mrunkel commented Sep 2, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment