<div class="loader">
  <div class="load"></div>
</div>
<div class="loader2">
  <div class="load2"></div>
</div>
<div class="loader3">
  <div class="load3"></div>
</div>
<div class="loader4">
  <div class="load4"></div>
</div>

body {
  background: black;
  color: #fff;
}
.loader {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);

  border-top: dodgerblue 16px solid;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  -webkit-animation: spin 200ms linear infinite; /* Safari */
  animation: spin 200ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/****************/

.load {
  position: absolute;
  top: -10%;
  left: -10%;
  transform: translate(-50%, -50%);

  border-top: dodgerblue 16px solid;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  -webkit-animation: spin 5000s linear infinite; /* Safari */
  animation: spin 5000s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/************ spin-2nd *************/

.loader2 {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);

  border-top: dodgerblue 56px solid;
  border-radius: 50%;
  width: 155px;
  height: 100px;
  -webkit-animation: spin 100ms linear infinite; /* Safari */
  animation: spin 100ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/****************/

.load2 {
  position: absolute;
  top: -10%;
  left: -10%;
  transform: translate(-50%, -50%);

  border-top: dodgerblue 16px solid;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  -webkit-animation: spin 5000s linear infinite; /* Safari */
  animation: spin 5000s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**************** spin 3d **************/

.loader3 {
  position: absolute;
  top: 57%;
  left: 52%;
  transform: translate(-50%, -50%);

  border-top: dodgerblue 16px solid;
  border-radius: 50%;
  width: 160px;
  height: 9px;
  -webkit-animation: spin 90ms linear infinite; /* Safari */
  animation: spin 90ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/****************/

.load3 {
  position: absolute;
  top: -10%;
  left: -10%;
  transform: translate(-50%, -50%);

  border-top: dodgerblue 16px solid;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  -webkit-animation: spin 5000s linear infinite; /* Safari */
  animation: spin 5000s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/************* spin 4th *************/

.loader4 {
  position: absolute;
  top: 50%;
  left: 83%;
  transform: translate(-50%, -50%);

  border-top: red 16px solid;
  border-radius: 50%;
  width: 80px;
  height: 150px;
  -webkit-animation: spin 3000ms linear infinite; /* Safari */
  animation: spin 300ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/****************/

.load4 {
  position: absolute;
  top: -10%;
  left: -10%;
  transform: translate(-50%, -50%);

  border-top: yellow 16px solid;
  border-radius: 50%;
  width: 15px;
  height: 180px;
  -webkit-animation: spin 5000s linear infinite; /* Safari */
  animation: spin 500ms linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}