How to Create 3 Animated Loading Dots with HTML, CSS, and JavaScript

A simple HTML CSS & JS project to have some fun.

Jan 27, 2025

Loading animations are a staple in modern web design. They let users know something is happening in the background while keeping the interface visually appealing. In this tutorial, we'll walk through creating a simple loading animation with three bouncing dots using HTML, CSS, and JavaScript.

Step 1: Setting Up the HTML Structure

We'll start by creating the basic HTML structure to hold our animated dots.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Loading Dots</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="loading-dots">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
  <script src="script.js"></script>
</body>
</html>

Here, we have a container (.loading-dots) that holds three <span> elements, each representing a dot.

Step 2: Styling the Dots with CSS

Next, we'll add styles to make the dots look uniform and give them animation.

Create a styles.css file and include the following:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f4f4f9;
  font-family: Arial, sans-serif;
}

.loading-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.2s infinite ease-in-out;
}

/* Apply delay to each dot */
.dot:nth-child(1) {
  animation-delay: 0s;
}
.dot:nth-child(2) {
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Explanation of the CSS

Keyframes (@keyframes bounce): Define the animation for scaling the dots.
Animation Delays: Each dot is animated with a delay to create the bouncing effect in sequence.
Styling the Dots: Dots are given a circular shape using border-radius and a consistent size.

Step 3: Adding JavaScript (Optional)

For a purely CSS-based animation, JavaScript isn't necessary. However, we can use JavaScript to dynamically add or remove dots or control the animation.

Create a script.js file with the following code:

const loadingContainer = document.querySelector('.loading-dots');

// Example: Dynamically add a dot
const newDot = document.createElement('span');
newDot.classList.add('dot');
loadingContainer.appendChild(newDot);

// Example: Remove a dot after 5 seconds
setTimeout(() => {
  loadingContainer.removeChild(newDot);
}, 5000);

This script shows how you can manipulate the dots dynamically if needed.

Step 4: Testing Your Animation

Save all the files (index.html, styles.css, and script.js) in the same folder.
Open index.html in your browser.
You should see three dots bouncing in sequence to create a smooth loading animation.

Customizations

Color: Change the background-color of .dot in the CSS to fit your design.
Size: Adjust the width and height properties of .dot to make the dots bigger or smaller.
Speed: Modify the 1.2s in the animation property to make the animation faster or slower.
Number of Dots: Add or remove <span class="dot"></span> elements in the HTML, and update the CSS delays accordingly.

With these simple steps, you've created a sleek and customizable loading animation! Use it in your projects to enhance the user experience. Let me know how it works for you!

Happy Coding,

Norbert B.M.

Norbert’s Web Dev School

Discussion about this post