* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 3px solid #262626;
    animation: animate 1.7s linear infinite;
}

.loader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #262626;
  animation: animateBg 1.7s linear infinite;

}

@keyframes animate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes animateBg {
  0% {
    height: 0;
  }
  25% {
    height: 0;

  }
  50% {
    height: 100%;

  }
  75% {
    height: 100%;

  }
  100% {
    height: 0;

  }
}