How to Create a Simple Wave Loading Animation with CSS

Introduction

Wave loading animations are a visually appealing way to indicate that content is loading. Instead of the traditional spinner or progress bar, wave loaders use animated shapes or bars that move in a wave-like motion, creating a sleek and engaging effect. This type of loader is particularly effective in modern web design and can be easily created using CSS keyframes. In this guide, we’ll show you how to build a simple wave loading animation using HTML and CSS, ensuring a smooth, responsive, and visually attractive loading experience.

What is a Wave Loading Animation?

A wave loading animation consists of multiple elements (usually bars or dots) that move in a wave-like pattern. The animation conveys a sense of dynamic movement, which keeps users engaged while waiting for content to load. This effect is ideal for websites, web applications, and dashboards, offering a modern and creative way to enhance the user experience during loading times.

Step-by-Step Guide to Building a Wave Loading Animation

1. Basic HTML Structure for the Wave Loader

We’ll start by creating the basic HTML structure for the wave loader. The loader will consist of multiple divs that will represent the wave bars.


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

  <!-- Wave Loader -->
  <div class="wave-loader">
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
    <div class="wave"></div>
  </div>

  <!-- Content Section -->
  <div class="content">
    <h1>Content Loaded!</h1>
    <p>This is the main content area. The wave loader was displayed before this content appeared.</p>
  </div>

</body>
</html>

Explanation of the HTML Structure:

Wave Loader:
- The div with the class wave-loader contains multiple child divs with the class wave, which will form the animated bars or dots. These bars will be animated using CSS to create the wave effect.
Content Section:
- The content section contains the main content of the webpage that will appear after the wave loader completes. This section is included for demonstration purposes.

2. CSS for Styling the Wave Loader

Next, we’ll style the wave loader using CSS keyframes to animate the bars in a wave motion. Each bar will move up and down, creating the illusion of a wave.


/* styles.css */

/* General Styling */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f4f4;
}

/* Wave Loader Styling */
.wave-loader {
  display: flex;
  justify-content: space-between;
  width: 120px;
}

.wave {
  width: 15px;
  height: 50px;
  background-color: #3498db; /* Blue bars */
  animation: wave 1.2s ease-in-out infinite;
}

.wave:nth-child(1) {
  animation-delay: 0s;
}
.wave:nth-child(2) {
  animation-delay: 0.1s;
}
.wave:nth-child(3) {
  animation-delay: 0.2s;
}
.wave:nth-child(4) {
  animation-delay: 0.3s;
}
.wave:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5); /* Increase height at the peak */
  }
  100% {
    transform: scaleY(1); /* Return to original height */
  }
}

/* Content Area Styling */
.content {
  display: none; /* Hidden initially */
  text-align: center;
}

Explanation of the CSS:

Wave Loader Styling:
- The wave loader uses flexbox (display: flex) to align the bars horizontally. Each bar is styled with a fixed width and height, and given a blue background color (background-color: #3498db).
Wave Animation:
- The @keyframes animation (wave) animates the bars by scaling their height up (scaleY(1.5)) at the peak and then returning them to their original size (scaleY(1)), creating a smooth vertical wave motion.
- Each bar has a different animation delay to create the wave effect, so the bars move one after another in sequence.
Content Area:
- The main content (.content) is hidden initially (display: none) and will be displayed after the wave loader completes.

3. Adding JavaScript for Content Loading Simulation

We’ll use JavaScript to simulate the content loading process, where the wave loader is displayed first, and after a few seconds, the content appears.


// scripts.js

// Simulate content loading with a timeout
window.addEventListener('load', function() {
  const waveLoader = document.querySelector('.wave-loader');
  const content = document.querySelector('.content');

  // Simulate a loading delay (e.g., fetching data)
  setTimeout(function() {
    waveLoader.style.display = 'none'; // Hide the wave loader
    content.style.display = 'block'; // Show the content
  }, 3000); // 3-second delay for demonstration purposes
});

Explanation of the JavaScript:

Simulate Loading Process:
- When the page finishes loading, a 3-second delay is introduced using setTimeout to simulate data loading.
- After the delay, the wave loader is hidden (waveLoader.style.display = 'none'), and the main content is shown (content.style.display = 'block').

4. Customizing the Wave Loader

To enhance the user experience, we can customize the wave loader by changing its size, color, and animation speed. This allows the loader to better fit the design of your website or application.


/* Enhanced Wave Loader Styling */
.wave {
  width: 10px; /* Narrower bars */
  height: 40px; /* Shorter height */
  background-color: #e74c3c; /* Red bars */
  animation: wave 1s ease-in-out infinite; /* Faster wave motion */
}

Customization Options:

Size Adjustment:
- The width and height of the bars can be adjusted to create different visual effects. In this case, the bars are made narrower and shorter.
Color Customization:
- The bar color can be changed to match the website’s brand colors. Here, the bars are set to red (#e74c3c).
Speed Adjustment:
- The animation speed can be adjusted to make the wave move faster or slower. In this example, the wave speed is increased to 1s.

5. Making the Wave Loader Responsive

We can ensure the wave loader is responsive across different screen sizes by adding a media query to adjust the loader size for mobile devices.


/* Media Query for Smaller Screens */
@media screen and (max-width: 600px) {
  .wave-loader {
    width: 80px; /* Narrower loader for mobile */
  }

  .wave {
    width: 8px; /* Narrower bars */
    height: 30px; /* Shorter bars */
  }

  .content h1 {
    font-size: 24px;
  }
}

Explanation of the Media Query:

Responsive Wave Loader Size:
- On screens smaller than 600px, the wave loader’s width is reduced to 80px, and the bars are made narrower and shorter to better fit mobile displays.
Content Adjustments:
- The font size of the content (h1) is reduced for smaller screens to ensure the design remains balanced and readable.

Best Practices for Designing Wave Loaders

To ensure your wave loader provides a smooth and engaging user experience, follow these best practices:

1. Keep the Design Minimal

Wave loaders are most effective when they are minimalistic. Avoid overly complex designs that can distract users. Stick to clean colors and simple animations.

2. Use Subtle Animations

The wave motion should be subtle and smooth. Avoid sharp or fast movements that can be distracting or feel unnatural. Use easing functions like ease-in-out for smoother transitions.


animation: wave 1.2s ease-in-out infinite;

3. Customize to Match Brand Colors

Ensure that the loader’s colors match the website’s brand identity. This creates a cohesive design and enhances the overall user experience.


background-color: #3498db; /* Brand color */

4. Ensure Smooth Transitions

Use CSS transitions to smoothly fade out the wave loader and display the content. This avoids abrupt changes between the loading and loaded states.

5. Optimize for Mobile Devices

Ensure the wave loader is responsive and works well on smaller screens by using media queries to adjust the size and spacing of the loader for mobile devices.

Live preview

See the Pen Building a Rotating Circle Loader with CSS Animations by codepen (@codepen-the-selector) on CodePen.

Conclusion

A wave loading animation is a modern and visually engaging way to indicate loading processes on your website or application. By using HTML, CSS, and JavaScript, you can create a smooth, customizable, and responsive wave loader that enhances user experience and keeps users engaged during loading times. This guide provides a step-by-step approach to building and customizing your own wave loading animation, ensuring it works seamlessly across all devices and screen sizes.

License Key