<div id="loader-wrap">
  <div class="loader">
    <div id="triangle-6"></div>
    <div id="triangle-5"></div>
    <div id="triangle-4"></div>
    <div id="triangle-3"></div>
    <div id="triangle-2"></div>
    <div id="triangle-1"></div>
  </div>
  <div class="circle"></div>
  <p>Click the circle to reload</p>
</div>

/*0a5c5b*/ 
/* 0e8684  */
/*  109896  */

body, html {
  margin: 0;
  width:100%;
  height:100%;
  background: rgba(6, 77, 101, 0.1);
}

p {
  position:absolute;
  top:calc(50% + 120px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: Geneva, sans-serif;
  text-transform: uppercase;
  color: rgba(6, 77, 101, 0.8);
}

#loader-wrap {
  position: relative;
  width:100%;
  height:100%;
}

div.loader {
  position:absolute;
  z-index: 1;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  width: 50px;
  height: 150px;
  animation: rotate 1s cubic-bezier(.45,-0.31,.52,.95) infinie;
  cursor: pointer;
}

#triangle-1 {
  position:absolute;
  top: 100px;
	width: 0;
	height: 0;
	border-top: 0px solid #0e8684;
	border-right: 50px solid transparent;
  animation: triangle-1 7s ease-in; 
  -webkit-animation: triangle-1 7s ease-in; 
}

#triangle-2 {
  position:absolute;
  top: 50px;
	width: 0;
	height: 0;
	border-bottom: 0px solid #109896;
	border-left: 50px solid transparent;
  animation: triangle-2 8s ease-in; 
  -webkit-animation: triangle-2 8s ease-in;
}

#triangle-3 {
  position:absolute;
  top: 50px;
	width: 0;
	height: 0;
	border-top: 0px solid #0c7372 ;
	border-right: 50px solid transparent;
  animation: triangle-3 8s ease-in;
  -webkit-animation: triangle-3 8s ease-in;
}

#triangle-4 {
  position: absolute;
  top:50px;
  right:50px;
	width: 0;
	height: 0;
	border-top: 50px solid #0e8684;
	border-left: 0px solid transparent;
  animation: triangle-5 0.4s 6.64s  ease-in; 
  -webkit-animation: triangle-5 0.4s 6.64s ease-in; 
}

#triangle-5 {
  position:absolute;
	width: 0;
	height: 0;
	border-bottom: 50px solid #0e8684;
	border-left: 0px solid transparent;
  animation: triangle-5 0.4s 4.72s ; 
  -webkit-animation: triangle-5 0.4s 4.72s; 
}
	
#triangle-6 {
  position:absolute;
  left:50px;
  top:50px;
  width: 0;
	height: 0;
	border-bottom: 50px solid #0e8684;
	border-right:  0px solid transparent;
   animation: triangle-6 0.4s 2.8s; 
  -webkit-animation: triangle-6 0.4s 2.8s; 
}

.circle {
  width: 200px;
  height: 200px;
  position:absolute;
  top:50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(6, 77, 101, 0.1);
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

@keyframes triangle-1 {
    0% {
     border-top-width: 0px;
   }
  11% {
     border-top-width: 0px;
   }
  12% {
     border-top-width: 50px;
   }
   15% {
     border-top-width: 50px;
   }
  16% {
     border-top-width: 0px;
   }
  100% {
     border-top-width: 0px;
   }
}

@-webkit-keyframes triangle-1 {
   0% {
     border-top-width: 0px;
   }
  11% {
     border-top-width: 0px;
   }
  12% {
     border-top-width: 50px;
   }
   15% {
     border-top-width: 50px;
   }
  16% {
     border-top-width: 0px;
   }
  100% {
     border-top-width: 0px;
   }
}

@keyframes triangle-6 {
    0% {
     border-right-width: 0px;
   }
   10% {
     border-right-width: 50px;
   }
   90% {
     border-right-width: 50px;
   }
  100% {
     border-right-width: 0px;
   }
}

@-webkit-keyframes triangle-6 {
  0% {
     border-right-width: 0px;
   }
   10% {
     border-right-width: 50px;
   }
   90% {
     border-right-width: 50px;
   }
  100% {
     border-right-width: 0px;
   }
}

@keyframes triangle-5 {
    0% {
     border-left-width: 0px;
   }
   10% {
     border-left-width: 50px;
   }
   90% {
     border-left-width: 50px;
   }
  100% {
     border-left-width: 0px;
   }
}

@-webkit-keyframes triangle-5 {
    0% {
     border-left-width: 0px;
   }
   10% {
     border-left-width: 50px;
   }
   90% {
     border-left-width: 50px;
   }
  100% {
     border-left-width: 0px;
   }
}


@keyframes triangle-3 {
 0% {
     border-top-width: 0px;
   }
   3% {
     border-top-width: 0px;
   }
  4% {
    border-top-width: 50px;
  }
  23% {
    border-top-width: 50px;
  }
  24% {
    border-top-width: 0px;
  }
  27% {
    border-top-width: 0px;
  }
  28% {
    border-top-width: 50px;
  }
  47% {
    border-top-width: 50px;
  }
  48% {
    border-top-width: 0px;
  }
  55% {
    border-top-width: 0px;
  }
  56% {
    border-top-width: 50px;
  }
  67% {
    border-top-width: 50px;
  }
  68% {
    border-top-width: 0px; 
  }
  79% {
    border-top-width: 0px; 
  }
  80% {
    border-top-width: 50px; 
  }
  91% {
    border-top-width: 50px; 
  }
  92% {
    border-top-width: 0px; 
  }
  98% {
    border-top-width: 0px; 
  }
  100% {
    border-top-width: 0px; 

  }
}

@-webkit-keyframes triangle-3 {
   0% {
     border-top-width: 0px;
   }
   3% {
     border-top-width: 0px;
   }
  4% {
    border-top-width: 50px;
  }
  23% {
    border-top-width: 50px;
  }
  24% {
    border-top-width: 0px;
  }
  27% {
    border-top-width: 0px;
  }
  28% {
    border-top-width: 50px;
  }
  47% {
    border-top-width: 50px;
  }
  48% {
    border-top-width: 0px;
  }
  55% {
    border-top-width: 0px;
  }
  56% {
    border-top-width: 50px;
  }
  67% {
    border-top-width: 50px;
  }
  68% {
    border-top-width: 0px; 
  }
  79% {
    border-top-width: 0px; 
  }
  80% {
    border-top-width: 50px; 
  }
  91% {
    border-top-width: 50px; 
  }
  92% {
    border-top-width: 0px; 
  }
  98% {
    border-top-width: 0px; 
  }
  100% {
    border-top-width: 0px; 

  }
}

@keyframes triangle-2 {
   0% {
     border-bottom-width: 0px;
   }
  7% {
    border-bottom-width: 0px;
  }
  8% {
    border-bottom-width: 50px;
  }
  19% {
    border-bottom-width: 50px;
  }
  20% {
    border-bottom-width: 0px;
  }
  31% {
    border-bottom-width: 0px;
  }
  32% {
    border-bottom-width: 50px;
  }
  43% {
    border-bottom-width: 50px;
  }
  44% {
    border-bottom-width: 0px;
  }
  51% {
    border-bottom-width: 0px;
  }
  52% {
    border-bottom-width: 50px;
  }
  71% {
    border-bottom-width: 50px;
  }
  72% {
    border-bottom-width: 0px;
  }
  75% {
    border-bottom-width: 0px;
  }
  76% {
    border-bottom-width: 50px;
  }
  95% {
    border-bottom-width: 50px;
  }
  96% {
    border-bottom-width: 0px;
  }
  100% {
    border-bottom-width: 0px; 

  }
}

@-webkit-keyframes triangle-2 {
   0% {
     border-bottom-width: 0px;
   }
  7% {
    border-bottom-width: 0px;
  }
  8% {
    border-bottom-width: 50px;
  }
  19% {
    border-bottom-width: 50px;
  }
  20% {
    border-bottom-width: 0px;
  }
  31% {
    border-bottom-width: 0px;
  }
  32% {
    border-bottom-width: 50px;
  }
  43% {
    border-bottom-width: 50px;
  }
  44% {
    border-bottom-width: 0px;
  }
  51% {
    border-bottom-width: 0px;
  }
  52% {
    border-bottom-width: 50px;
  }
  71% {
    border-bottom-width: 50px;
  }
  72% {
    border-bottom-width: 0px;
  }
  75% {
    border-bottom-width: 0px;
  }
  76% {
    border-bottom-width: 50px;
  }
  95% {
    border-bottom-width: 50px;
  }
  96% {
    border-bottom-width: 0px;
  }
  100% {
    border-bottom-width: 0px; 

  }
}

// Reload Animation On Click
	 $(function() {
	      $(".loader").click(function() {	
	      
	      // console.log("swapout");
	      
        var el     = $(this),  
            newone = el.clone(true);
           
        el.before(newone);
        
        $("." + el.attr("class") + ":last").remove();
      }); 
    });