Bounce loading

Bounce loading, someone asked me to explain?

Create a bounce loader animation.

Bounce loading


<html lang="en">
    <meta charset="UTF-8">
    <title>Pure CSS for circular animation</title>
    <link href="~/css/style.css" rel="stylesheet" />
    <div class="bouncing-loader">


@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 .

  1. @keyframesAn animation with two states is defined in which the elements are changedopacityand usedtransform: translateY()on a 2D planetransform: translateY().

  2. .bouncing-loaderIs the parent container of the bounce circle, use display: flexandjustify-content: centerplace them in a central position.

  3. .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.

  4. 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.

  5. animationIs an abbreviation attribute for various animation properties: useanimation-nameanimation-durationanimation-iteration-countanimation-direction.

  6. nth-child(n)The target is the nth child of its parent element.

  7. animation-delayUsed for the second and third respectively div, so that each element does not start the animation at the same time.

Post your comments / questions