<div class="tidycoderLoading"></div>

body, html{
  background: #111;
  margin: 0;
}
html{
  padding: 0;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 5px;
  box-sizing: border-box;
}
.tidycoderLoading{
  background: #111;
  animation: 5s dayNightHere infinite;
  height: min(max(25vw, 255px), calc(100vw - 10px));
  width: min(max(25vw, 255px), calc(100vw - 10px));
  border-radius: 50%;
  border: 3px solid gray;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tidycoderLoading:before{
  content: "";
  transform: translateY(calc(min(max(25vw, 255px), calc(100vw - 10px)) / -2.55));
  height: calc(min(max(25vw, 255px), calc(100vw - 10px)) / 5);
  width: calc(min(max(25vw, 255px), calc(100vw - 10px)) / 5);
  background: #333;
  border-radius: 50%;
  animation: rotateNow 5s infinite linear;
}
@keyframes rotateNow{
  0%{
    rotate: 0deg;
    background: #fa0;
    box-shadow: 0 0 15px 5px #940;
  }
  50%{
    background: #333;
    box-shadow: 0 0 5px 5px #333;
  }
  100%{
    rotate: 360deg;
    background: #fa0;
    box-shadow: 0 0 15px 5px #940;
  }
}
@keyframes dayNightHere{
  0%{
    background: center url("https://cdn.pixabay.com/photo/2020/07/23/08/31/dawn-5430746_960_720.jpg");
  }
  50%{
    background: top right url("https://cdn.pixabay.com/photo/2020/08/31/03/59/stars-5531280_960_720.jpg");
  }
  100%{
    background: center url("https://cdn.pixabay.com/photo/2020/07/23/08/31/dawn-5430746_960_720.jpg");
  }
}