.loading-wrap {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center center;
  background-color: #ffe100;
  z-index: 9999;
}

.loader {
  position: relative;
  width: 110px;
  height: 120px;
  background: #222;
  overflow: hidden;
  clip-path: polygon(61% 0, 60% 39%, 86% 39%, 47% 100%, 48% 59%, 18% 59%);
  animation: LoaderWrap 3s cubic-bezier(0.830, 0.110, 0.590, 1.045) forwards;
}

@keyframes LoaderWrap {
  0% {
    transform: scale(1);
   }
  60% { 
    transform: scale(1);
   }
  75% { 
    transform: scale(0.6);
   }
  100% { 
    transform: scale(10);
   }
}

.loader:after{
  content: '';
  position: absolute;
}

.loader:before{
  content: '';
  position: absolute;
  inset: 0px;
  background: #9B61FC;
  animation: Loader 2.4s cubic-bezier(0.830, 0.110, 0.590, 1.045) forwards;
}
@keyframes Loader {
  0% {
    transform: translateY(120px);
   }
  80% {
    transform: translateY(0px) scale(1);
   }
  100% { 
    transform: translateY(0px);
   }
}

.loaded {
  opacity: 0;
  transition: opacity 0.6s;
}

.none {
  display: none;
}