*{
  box-sizing: border-box;
}
.loader-wrap {
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  mix-blend-mode: color-burn;
}
.loader-wrap .box{
  position: fixed;
  width: 150px;
  height: 150px;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}

.loader {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  width: 50px;
  height: 50px;
  border: 15px solid;
  border-radius: 50%;
  border-top-color: rgba(44,44,44,0);
  border-right-color: rgba(55,55,55,0);
  border-bottom-color: rgba(66,66,66,0);
  border-left-color: rgba(33,33,33,0);
  animation: loadEr 3s infinite;
}

@keyframes loadEr {
  0% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);

  }
  10.4% {
    border-top-color: rgba(44,44,44,0.5);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  }
  20.8% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  }
  31.2% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0.5);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  }
  41.6% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
    transform:translate(-50%,-50%) rotate(40deg);
  }
  52% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0.5);
    border-left-color: rgba(33,33,33,0);
  }
  62.4% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0);
  }
  72.8% {
    border-top-color: rgba(44,44,44,0);
    border-right-color: rgba(55,55,55,0);
    border-bottom-color: rgba(66,66,66,0);
    border-left-color: rgba(33,33,33,0.5);
  }
}

.loader-wrap .loaderbefore {
  width: 50px;
  height:50px;
  border: 15px solid #ddd;
  border-radius: 50%;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  z-index: 9;
}

.loader-wrap .circular {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 70px;
  height: 70px;
  border: 20px solid;
  border-radius: 50%;
  border-top-color: #333;
  border-left-color: #fff;
  border-bottom-color: #333;
  border-right-color: #fff;
  opacity: 0.3;
  animation: poof 5s infinite;
}
@keyframes poof {
  0% {transform:translate(-50%,-50%) scale(1,1) rotate(0deg); opacity: 0.3;}
  50% {transform:translate(-50%,-50%) scale(4,4) rotate(360deg); opacity: 0;}
}
.loader-wrap .another {
  opacity: 0.2;
  transform: translate(-50%,-50%)  rotate(90deg);
  animation: poofity 5s infinite;
  animation-delay: 1s;
}
@keyframes poofity {
  0% {transform:translate(-50%,-50%) scale(1,1) rotate(90deg); opacity: 0.2;}
  50% {transform:translate(-50%,-50%) scale(4,4) rotate(-360deg); opacity: 0;}
}

.loader-text {
  position: fixed;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  margin-top: 80px;
  color: #fff;
  font-size: 24px!important;
}