Pulsating Circle Animation CSS

Pulse Circle Animation CSS with No JS | Pulsating Heartbeat Effect

by

Pulsating circle animation is a visual component which every other website uses to create an attractive effect to highlight something that probably people don’t notice easily.

Messenger’s camera option is one of the examples which uses this effect. There are many use cases of pulse circle animation like it can be released on the hover event, or maybe as a webpage loader.

Now let’s move on to the coding part and see how we can create this pulsating circle using CSS.

The coding idea is that we’ll create a div element and style it as a circle using CSS. And then, we’ll create waves using the same DIV’s before & after pseudo-classes. In the final step, we’ll create keyframes for the pulsating circle animation. So, let’s get started with HTML first then we will add the CSS to make this pulse animation.

Pulse Circle Animation CSS & HTML

Demo

See the Pen Pulsating Circle CSS Animation [No JS] by Arpit Mittal (@codingiseasy) on CodePen.

HTML

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

CSS

.pulsating-circle {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translateX(-50%) translateY(-50%);
 width: 30px;
 height: 30px;
}
.pulsating-circle:before {
 content: "";
 position: relative;
 display: block;
 width: 300%;
 height: 300%;
 box-sizing: border-box;
 margin-left: -100%;
 margin-top: -100%;
 border-radius: 45px;
 background-color: #01a4e9;
 -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
         animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 display: block;
 width: 100%;
 height: 100%;
 background-color: white;
 border-radius: 15px;
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
 -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
         animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}
@-webkit-keyframes pulse-ring {
 0% {
   transform: scale(0.33);
 }
 80%, 100% {
   opacity: 0;
 }
}
 
@keyframes pulse-ring {
 0% {
   transform: scale(0.33);
 }
 80%, 100% {
   opacity: 0;
 }
}
@-webkit-keyframes pulse-dot {
 0% {
   transform: scale(0.8);
 }
 50% {
   transform: scale(1);
 }
 100% {
   transform: scale(0.8);
 }
}
@keyframes pulse-dot {
 0% {
   transform: scale(0.8);
 }
 50% {
   transform: scale(1);
 }
 100% {
   transform: scale(0.8);
 }
}

In CSS, select the “pulsating-circle” class and define its position as absolute. Then , define the 30px value for both width and height property. In order to align the circle to the center of its relative parent element, specify 50% value for the left and top property along with the -50% translateX and translateY transformation.

After this, target the before pseudo-selector to style the wave effect. Similarly, target the after pseudo-selector to design the pulsing circle.

That’s it. Hope that you have successfully created this pulsating circle by yourself and you didn’t encounter any bugs.

Leave a Comment