Code Css/html Animation Loading

File HTML:

<section class="loading">
  <a href="https://azpivi.net">
    <div class="one">
  </div>
  </a>
</section>

File CSS:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #26d0f3;
}

.loading {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading .one {
  height: 80px;
  width: 80px;
  border: 6px solid white;
  transform: rotate(45deg);
  border-radius: 0 50% 50% 50%;
  position: relative;
  animation: move 0.5s linear infinite alternate-reverse;
}
.loading .one::before {
  content: "";
  position: absolute;
  height: 55%;
  width: 55%;
  border-radius: 50%;
  border: 6px solid transparent;
  border-top-color: white;
  border-bottom-color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes move {
  to {
    transform: translateY(20px) rotate(45deg);
  }
}