.loader__icon {
  fill: transparent;
  margin-bottom: $bz-space-stack-s;
  stroke: $bz-theme-400;
  stroke-width: 10;
  stroke-linecap: round;
  &--l {
    stroke-width: 18;
  }
  &--m {
    stroke-width: 22;
  }
  &--s {
    stroke-width: 22;
  }
}

.loader-poly {
  stroke-dasharray: 1032;
  stroke-dashoffset: 1032;
  animation: polyBZ 2s ease-in-out infinite;
}

@keyframes polyBZ {
  0% {
    stroke-dashoffset: 1032;
  }

  35% {
    stroke-dashoffset: 0;
  }

  60% {
    stroke-dashoffset: 0;
  }

  95% {
    stroke-dashoffset: -1032;
  }

  100% {
    stroke-dashoffset: -1032;
  }
}



.loader-small {
  stroke: $bz-theme-400;
  fill: transparent;
  stroke-width: 30;
  width: 20px;
  stroke-linecap: round;
}

.loader-small__poly {
  stroke-dasharray: 1032;
  stroke-dashoffset: 1032;
  animation: polyBZsmall 2s linear infinite;
}

@keyframes polyBZsmall {
  0% {
    stroke-dashoffset: 1032;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1032;
  }
}




.lineOne {
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: lineOne 2s ease-in-out infinite;
}

.lineTwo {
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: lineTwo 2s ease-in-out infinite;
}

.lineThree {
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: lineThree 2s ease-in-out infinite;
}

@keyframes lineOne {
  35% {
    stroke-dashoffset: 550;
  }
  60% {
    stroke-dashoffset: 0;
  }

  95% {
    stroke-dashoffset: -550;
  }

  100% {
    stroke-dashoffset: -550;
  }
}

@keyframes lineTwo {
  35% {
    stroke-dashoffset: 550;
  }
  60% {
    stroke-dashoffset: 0;
  }

  95% {
    stroke-dashoffset: -550;
  }

  100% {
    stroke-dashoffset: -550;
  }
}

@keyframes lineThree {
  35% {
    stroke-dashoffset: 550;
  }
  60% {
    stroke-dashoffset: 0;
  }

  95% {
    stroke-dashoffset: -550;
  }

  100% {
    stroke-dashoffset: -550;
  }
}






// LOADER EXPLORER

.loader__icon--explorer {
  animation: explorer 0.8s linear infinite;
  transform: rotate(0deg);
}

.line-two { 
  opacity: 0;
}
.line-three {
  opacity: 0.2;
} 
.line-four {
  opacity: 0.4;
}
.line-five {
  opacity: 0.6;
}
.line-six {
  opacity: 0.8;
}

@keyframes explorer {
  0% {
    transform: rotate(0deg);
  }
  16% {
    transform: rotate(0deg);
  }
  16.6% {
    transform: rotate(60deg);
  }
  33% {
    transform: rotate(60deg);
  }
  33.2% {
    transform: rotate(120deg);
  }
  49% {
    transform: rotate(120deg);
  }
  49.8% {
    transform: rotate(180deg);
  }
  66% {
    transform: rotate(180deg);
  }
  66.4% {
    transform: rotate(240deg);
  }
  82% {
    transform: rotate(240deg);
  }
  83% {
    transform: rotate(300deg);
  }
  99% {
    transform: rotate(300deg);
  }
  100% {
    transform: rotate(360deg);
  }
}