* {
  margin: 20px 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #001d30;
  animation: changeBg 5s linear infinite;
  -webkit-animation: changeBg 5s linear infinite;
}
@keyframes changeBg {
  to {
    filter: hue-rotate(360deg);
    -webkit-filter: hue-rotate(360deg);
  }
}
.loader {
  position: absolute;
  width: 150px;
  height: 150px;
  background: linear-gradient(to top, #001d30 40%, #51eeee);
  border-radius: 50%;
  animation: rotate 2s linear infinite;
  -webkit-animation: rotate 2s linear infinite;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
.loader::before {
  content: "";
  position: absolute;
  background: #001d30;
  inset: 20px 20px 0 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.loader::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -8px;
  width: 40px;
  height: 40px;
  background: #51eeee;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0 0 5px #51eeee, 0 0 25px #51eeee, 0 0 50px #51eeee,
    0 0 75px #51eeee;
}