Build a Relaxing Pulsating Circle Loader

Introduction

In this tutorial, you'll learn how to create a simple yet effective loader - the Pulsating Circle Loader. This loader is visually appealing and is created solely using CSS animations, which means it's lightweight and easy to implement in any project.

HTML Structure

The HTML structure for this loader is minimalistic. It consists of a container div that centers the loader on the screen and a single div that represents the loader. Here's the HTML structure we'll be using:

        <div class="loader-container">
          <div class="pulsating-circle"></div>
        </div>
      

CSS Styling

Now, let's move on to styling our loader. We'll begin by centering our loader on the page using the Flexbox layout for the container. Let's give the container a background color that contrasts well with our loader.

        .loader-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #f7f7f7;
        }
      

The above code styles the loader-container class. It sets the display to flex, which makes it easier to align items. The justify-content and align-items properties are set to center, which places our loader in the center of the page. The container takes up the full view height (100vh) and is given a light grey background color.

Next, we style the circle that will be pulsating on the screen. The styling involves setting dimensions, making it a circle, and adding a color. Then, we will create an animation that scales the circle and fades its opacity.

        .pulsating-circle {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: #3498db;
          animation: pulsate 1.5s infinite ease-in-out;
        }
      

The above code targets the pulsating-circle class, giving it a fixed width and height of 50 pixels. It is transformed into a circle using the border-radius: 50% property. The circle is also colored with a cool blue shade (#3498db).

CSS Animation

For the animation, we define a keyframe that scales the size and adjusts the opacity, creating a pulsating effect. Let's define the @keyframes as follows:

        @keyframes pulsate {
          0%, 100% {
            transform: scale(1);
            opacity: 1;
          }
          50% {
            transform: scale(1.5);
            opacity: 0.5;
          }
        }
      

The @keyframes give us control over how our animation transitions between start, middle, and end points. In the animation, transform: scale(1) and opacity: 1 at 0% and 100% keeps it at its initial state. At 50%, we scale the circle up with transform: scale(1.5) and reduce opacity to 0.5 to create a soothing pulse effect.

We attach this animation to our pulsating circle with the animation property. It plays infinitely, repeats every 1.5 seconds, and smoothly transitions in and out.

Conclusion

And that's it! You've created a pulsating circle loader that can be used in any of your websites or web applications. This loader is entirely created with HTML and CSS, making it efficient and quick to load. Now you can incorporate this loader into your project and enhance your user experience by giving a visual indication of loading processes.

Feel free to experiment with different colors, sizes, and animation speeds to match the aesthetics of your project. CSS animations are a powerful tool for enhancing the user interface without any jarring transitions. Happy coding!

Whole code

<div class="loader-container">
  <div class="pulsating-circle"></div>
</div>


<style>
.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.pulsating-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #3498db;
  animation: pulsate 1.5s infinite ease-in-out;
}

@keyframes pulsate {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}

</style>