HTML & CSS Loading Spinner (Pulse)

When doing Web Dev you will often need to fetch information from an API and that may take time. Therefore you want to show the user something to show that data is loading.

Here we will create a really simple loading pulse, rather than a spinner. The pulse will beat to show that we are waiting. You can see an example of the pulse at the bottom of this page.

HTML

The HTML for this is really very simple.

<div class="loading-pulse">
  <div class="pulse"></div>
</div>

Just too simple divs, which don’t really need any explanation.

CSS

Now for the CSS, again this is fairly simple, but I’ll explain what it does.

The first block of CSS, “.loading-pulse”, sets the parent container of the pulse to be a flex container. The “display: flex” property makes the container a flex container, and “justify-content: center” and “align-items: center” centers the child element (the pulse) within the parent container.

The second block of CSS, “.pulse”, styles the pulse element. It sets the width and height of the pulse to 40px, the margin to 100px auto (which centers the pulse horizontally), the background color to #333 (a dark gray color), and the border radius to 100% (which makes the pulse a circle).

The animation property “animation: sk-scaleout 1.0s infinite ease-in-out” applies the “sk-scaleout” animation to the pulse with a duration of 1.0 seconds, and an “ease-in-out” timing function, and loops it infinitely.

The @keyframes sk-scaleout is the animation, it defines the animation and the animation keyframes. At 0% it scales the element to 0, and at 100% it scales it to 1.0 and makes the element opaque. This creates the pulse effect, making the pulse appear to expand and fade out repeatedly.

.loading-pulse {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pulse {
  width: 40px;
  height: 40px;
  margin: 100px auto;
  background-color: #333;
  border-radius: 100%;  
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
  0% { transform: scale(0) }
  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

Conclusion

This will create a very simple, but stylish-looking animated pulse. You can of course change the colours and size to suit the design of your page or application.

Example