Pulse Preloader ( SCSS )

In this example below you will see how to do a Pulse Preloader ( SCSS ) with some HTML / CSS and Javascript

SCSS Preloader using a single element

Thumbnail
This awesome code was written by andrewvink, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andrewvink ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pulse Preloader ( SCSS )</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- Pulse Preloader -->
<div class="pulse"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/andrewvink/pulse-preloader-scss-AaKzL */
.pulse {
  position: relative;
  /* Temp Postioning */
  left: 50%;
  margin-left: -40px;
  margin-top: 5%;
}
.pulse:before, .pulse:after {
  content: '';
  border: 5px solid #323232;
  width: 80px;
  height: 80px;
  border-radius: 500px;
  position: absolute;
}
.pulse:before {
  -webkit-animation: pulse-outer 0.8s ease-in infinite;
  -moz-animation: pulse-outer 0.8s ease-in infinite;
  animation: pulse-outer 0.8s ease-in infinite;
}
.pulse:after {
  -webkit-animation: pulse-inner 0.8s linear infinite;
  -moz-animation: pulse-inner 0.8s linear infinite;
  animation: pulse-inner 0.8s linear infinite;
}

@-webkit-keyframes pulse-outer {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-moz-keyframes pulse-outer {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@keyframes pulse-outer {
  0% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
  50% {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
  100% {
    opacity: 0;
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes pulse-inner {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes pulse-inner {
  0% {
    -moz-transform: scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -moz-transform: scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}
@keyframes pulse-inner {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

Comments