Overwatch Loader v.2

In this example below you will see how to do a Overwatch Loader v.2 with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Overwatch Loader v.2</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="row">
    <div class="hexagon hex-1"></div>
    <div class="hexagon hex-2"></div>
    <div class="hexagon hex-3"></div>
    <div class="hexagon hex-4"></div>
    <div class="hexagon hex-5"></div>
    <div class="hexagon hex-6"></div>
    <div class="hexagon hex-7"></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/Azzazzelko/overwatch-loader-v2-aNXEXJ */
* {
  box-sizing: border-box;
  font-size: 0px;
}

.container {
  position: absolute;
  width: 500px;
  height: 275px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #161616;
}

.container:before {
  content: "";
  position: absolute;
  top: -150px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 250px solid transparent;
  border-right: 250px solid transparent;
  border-bottom: 150px solid #161616;
}

.container:after {
  content: "";
  position: absolute;
  bottom: -150px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 250px solid transparent;
  border-right: 250px solid transparent;
  border-top: 150px solid #161616;
}

html{
  width: 100%;
  height: 100%;
}

body{
  padding: 0;
  margin: 0;
  height: 100%;
  padding-top: 60px;
  background: radial-gradient(#666, #333);
}

.row {
  margin-left: 100px;
  margin-top: -25px;
  position: relative;
/*   height: 105px; */
}

.hexagon {
  opacity: 0;
  transform: scale(0);
  margin-top: 50px;
  width: 100px;
  height: 55px;
  background: white;
  position: absolute;
  z-index: 100;
}
.hexagon:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid white;
}
.hexagon:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid white;
}

.hex-1 {
  animation: hex-1 0.5s forwards, hex-2 0.5s 1.5s forwards;
  left: 50px;
  top: 0px;
}
.hex-2 {
  animation: hex-1 0.5s 0.2s forwards, hex-2 0.5s 1.7s forwards;
  top: 0px;
  left: 152px;
}
.hex-3 {
  animation: hex-1 0.5s 0.4s forwards, hex-2 0.5s 1.9s forwards;
  top: 82px;
  left: 204px;
}
.hex-4 {
  animation: hex-1 0.5s 0.6s forwards, hex-2 0.5s 2.1s forwards;
  top: 164px;
  left: 152px;
}
.hex-5 {
  animation: hex-1 0.5s 0.8s forwards, hex-2 0.5s 2.3s forwards;
  top: 164px;
  left: 50px;
}
.hex-6 {
  animation: hex-1 0.5s 1s forwards, hex-2 0.5s 2.5s forwards;
  top: 82px;
}
.hex-7 {
  animation: hex-1 0.5s 1.2s forwards, hex-2 0.5s 2.7s forwards;
  left: 102px; 
  top: 82px;
}

@keyframes hex-1 {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes hex-2 { 
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}


/*Downloaded from https://www.codeseek.co/Azzazzelko/overwatch-loader-v2-aNXEXJ */
(function(){
  function check(){
    var hexS = $(".hexagon");
    
    hexS.css("animation", "none");
    setTimeout(function() {
      hexS.attr("style", "123");
    }, 100);
    
  };
  
  var anime = setInterval(function(){
    check()
  }, 3000);
 
})();

Comments