Mad Preloader v2 (bootstrap)

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

Thumbnail
This awesome code was written by -Infamous, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Infamous ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mad Preloader v2 (bootstrap)</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div class="container-fluid preloader-bg">
    <div class="row preload-container">
    <div class="col-xs-6 text-center preload-container__svg-wrap">
      <svg class="mad-svg" stroke="1px #EE2D24" fill="#EE2D24" viewBox="0 0 400 400">
          <polygon class="st0" points="28.1,232.5 28.1,147 87.1,232.5 143.6,147 143.6,232.5 144.9,232.5 201.4,147 257.9,232.5 259.2,232.5
	259.2,147 374.7,234.4 28.1,234.4 "/>
        </svg>
    </div>
  </div>
</div>
</body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Infamous/mad-preloader-v2-bootstrap-vZmPVe */
.preloader-bg {
  background-color: #2B2F3D;
}

.preload-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preload-container__svg-wrap svg{
  stroke: #EE2D24;
  fill: #EE2D24;
  fill-opacity: 0;
  width: 100%;
  height: auto;
  stroke-dasharray: 1300;
  stroke-dashoffset: 1300;
  animation: drawfill 10s cubic-bezier(0.4,0.0,0.2,1) forwards; 
}

@keyframes drawfill {
  0% {
    stroke-dashoffset: 1300;
  }
  35% {
    fill-opacity: 0;
  } 
  50% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}


/*Downloaded from https://www.codeseek.co/-Infamous/mad-preloader-v2-bootstrap-vZmPVe */
setTimeout(function() {
  $(".preloader-bg").fadeOut("fast");
}, 5500);

Comments