Pulse Preloader ( SCSS )

SCSS Preloader using a single element

<!DOCTYPE html>
<html >
<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/ */
.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);
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Pulse Preloader ( SCSS ) ) is write by Andrew Vink, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Andrew Vink