Create a bounce loader animation.
HTML CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS for circular animation</title>
<link href="~/css/style.css" rel="stylesheet" />
</head>
<body>
<div class="bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
CSS CODE:
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.bouncing-loader {
display: flex;
justify-content: center;
}
.bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
Note:1remUsually it is16px .
@keyframesAn animation with two states is defined in which the elements are changedopacityand usedtransform: translateY()on a 2D planetransform: translateY().
.bouncing-loaderIs the parent container of the bounce circle, use display: flexandjustify-content: centerplace them in a central position.
.bouncing-loader > div, the three children of the parentdivas a style.divThe width and height are 1remused toborder-radius: 50%change them from square to round.
margin: 3rem 0.2remSpecify the top/bottom margin of each circle as the3remleft/right margin 0.2remso that they do not directly touch each other, giving them some breathing space.
animationIs an abbreviation attribute for various animation properties: useanimation-name, animation-duration, animation-iteration-count, animation-direction.
nth-child(n)The target is the nth child of its parent element.
animation-delayUsed for the second and third respectively div, so that each element does not start the animation at the same time.