html

Creating pulse animation loader using CSS

<!--HTML CODE-->
<div class="pulse_loader">
   <div class="pls p1"></div>
   <div class="pls p2"></div>
</div>

<!--CSS CODE-->
<style>
   .pulse_loader {
      position: relative;
      height: 80px;
      width: 80px;
      margin: 50px auto;
   }

   .pulse_loader .pls {
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border: 1px solid;
      border-radius: 50%;
      animation: plse 1.4s infinite;
      width: 70%;
      height: 70%;
      transform: scale(0);
   }

   .pulse_loader .p1 {
      width: 100%;
      height: 100%;
      border-color: #0082ed;
   }

   .pulse_loader .p2 {
      width: 70%;
      height: 70%;
      animation-delay: .5s;
      border-color: #ff0000;
   }

   @keyframes plse {
      0% {
         opacity: 1;
         transform: scale(0);
      }
      100% {
         opacity: .2;
         transform: scale(1);
      }
   }
</style>

Using this code you can create a pulse-like animation loader that you can use in your web project. We have created it using CSS animation property by creating keyframes that transform the HTML box to different scales to generate pulse-like effect.

You can check the live demo by clicking below button.

Live Demo

Was this helpful?