Back

Creating a Playful Bouncing Dots Loading Animation

Learn how to build a fun, physics-inspired loading indicator with elastically bouncing dots using CSS animations.

HTML

The HTML structure for our bouncing dots loader is remarkably simple. We need a container with the class "bouncing-loader" that houses three div elements with the class "dot". Each dot will animate independently to create our bouncing sequence.

        <div class="bouncing-loader">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>

CSS

Let's start by setting up our loader container. We'll use flexbox to create a horizontal row of dots with consistent spacing. The gap property creates an equal 10px space between each dot, while the height provides adequate room for the dots to bounce without being constrained.

        .bouncing-loader {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            height: 60px;
        }

Next, we style each dot. We'll create 16×16px circles using border-radius: 50% and give them a vibrant green color (#16A34A) that conveys a sense of energy and activity. The animation property applies our "bounce" animation to run for 1.2 seconds, repeat infinitely, and use a custom cubic-bezier timing function for a more realistic, elastic bouncing effect.

        .dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #16A34A;
            animation: bounce 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
        }

To create a sequence effect, we stagger the animation start time for each dot. Using the nth-child selector, we add incremental delays of 0.2 seconds to each dot after the first. We also use a slightly darker shade of green for each subsequent dot, creating a visual hierarchy that adds depth to the animation.

        .dot:nth-child(2) {
            animation-delay: 0.2s;
            background-color: #15803D;
        }

        .dot:nth-child(3) {
            animation-delay: 0.4s;
            background-color: #14532D;
        }

The animation is defined using the @keyframes rule. We create a simple up-and-down motion where the dots start and end at their original position (translateY(0)), and reach their peak height at the 50% mark of the animation (translateY(-20px)).

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-20px);
            }
        }

The cubic-bezier timing function we've chosen (0.22, 0.61, 0.36, 1) gives the animation a slight acceleration at the beginning, a smooth peak, and then a bit more "hang time" at the top of the bounce before accelerating back down. This creates a more natural, physics-inspired movement rather than a mechanical, linear one. The dots appear to have weight and elasticity, making the animation feel more organic and engaging. The bouncing dots loader has several appealing characteristics: - Intuitive motion: The bouncing animation mimics familiar physical movement, making it immediately recognizable as an active loading state. - Playful character: The sequential bouncing creates a lighthearted, friendly impression that can reduce perceived wait times. - Perfect for casual contexts: The playful nature makes it particularly well-suited for gaming, educational, or social applications. - Scalability: The animation maintains its character when scaled up or down, making it adaptable to different contexts. This loader strikes a balance between providing clear feedback about an ongoing process while adding a touch of personality that can make waiting just a little more enjoyable.

Whole code

<div class="bouncing-loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
.bouncing-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 60px;
}

.dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #16A34A;
  animation: bounce 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
  background-color: #15803D;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
  background-color: #14532D;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
</style>

Creating a Playful Bouncing Dots Loading Animation

HTML

CSS

Whole code

Comments

More loaders

Similar

See also