Post
Ask Question

Creating a Three Dot Loading Animation

HTML Structure

We'll start by creating the basic HTML structure, which includes a container for the loading dots.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Dot Loading Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="loading">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</body>
</html>

In this HTML snippet, the serves as the container for our loading animation, and the elements represent the individual dots.

CSS Styling

Next, we need to style our loading animation with CSS. We'll center the dots on the screen, and define their size, spacing, and blinking animation.

.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #333;
    border-radius: 50%;
    animation: blink 1.4s infinite both;
}
.dot:nth-child(1) {
    animation-delay: -0.32s;
}
.dot:nth-child(2) {
    animation-delay: -0.16s;
}
@keyframes blink {
    0%, 80%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

Output

Loading Animation

Let's break down the CSS

  1. Container Styling (.loading)
    • display: flex: Uses Flexbox to center the dots.
    • justify-content: center: Centers the dots horizontally.
    • align-items: center: Centers the dots vertically.
    • height: 100vh: Sets the height of the container to the full viewport height.
  2. Dot Styling (.dot)
    • width and height: Sets the size of each dot to 10px by 10px.
    • margin: Adds a horizontal space of 5px between the dots.
    • background color: Sets the color of the dots to a dark shade (#333).
    • border-radius: Makes the dots circular by setting the border radius to 50%.
    • animation: Applies the blink animation with a duration of 1.4 seconds, repeating infinitely.
  3. Animation Delays
    • The first dot has an animation delay of -0.32s.
    • The second dot has an animation delay of -0.16s.
    • This staggered delay creates a sequential blinking effect.
  4. Blink Animation (@keyframes blink)
    • Defines the keyframes for the blinking effect.
    • At 0%, 80%, and 100%, the opacity is set to 0 (dots are invisible).
    • At 40%, the opacity is set to 1 (dots are fully visible).

Conclusion

This simple yet effective three-dot loading animation can be easily integrated into any web project. The use of CSS animations and Flexbox for layout makes it highly customizable and responsive. You can adjust the dot size, colors, and animation timing to fit your design requirements.


Similar Articles