Chrome Extension

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>
We are a bunch of lazy programmers so we developed this chrome extension
search code from your favorite search engine
Install Now

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?
0 Comments
Open Code Manager We are hiring