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>

Do you know, you can create and search your own code snippets on Devsheet. Store your code on cloud using devsheet and search using its chrome extension. Is it look cool?

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
Never leave your website again in search of code snippets by installing our chrome extension.