2.8 KiB
2.8 KiB
Bouncy Animated loading animation
Clean & simple animated loading animation with CSS3. If you are worried about super deep browser support, use a GIF.
HTML
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
CSS
.snippet-demo__Animated-loading-animation {
text-align: center;
}
.snippet-demo__Animated-loading-animation span {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin: 50px auto;
background: black;
border-radius: 50px;
animation: loader 0.9s infinite alternate;
animation: loader 0.9s infinite alternate;
}
.snippet-demo__Animated-loading-animation span:nth-of-type(2) {
animation-delay: 0.3s;
animation-delay: 0.3s;
}
.snippet-demo__Animated-loading-animation span:nth-of-type(3) {
animation-delay: 0.6s;
animation-delay: 0.6s;
}
@keyframes loader {
0% {
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
Demo
Explanation
+1. translateY The translateY() CSS function repositions an element vertically on the 2D plane.
+2. animation The animation CSS property is a shorthand property for the various animation properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
Browser support
94.7%