HTML Loaders with CSS

loader.css

.spinner-1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: repeating-conic-gradient(#000 0 90deg,#ccc 0 180deg);
  animation: s1 1s infinite linear;
}

@keyframes s1 {
  100% {transform: rotate(.5turn)}
}

.spinner-2 {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  background: conic-gradient(#25b09b 25%,#f03355 0 50%,#514b82 0 75%,#ffa516 0);
  animation: s2 2s infinite linear;
}
.spinner-2::before,
.spinner-2::after {
   content:"";
   grid-area: 1/1;
   margin:15%;
   border-radius: 50%;
   background:inherit;
   animation:inherit;
}
.spinner-2::after {
   margin:25%;
   animation-duration: 3s;
}

@keyframes s2 {
  100% {transform: rotate(1turn)}
}


.spinner-3 {
  width: 50px;
  height: 50px;
  display: grid;
  border-radius: 50%;
  -webkit-mask:radial-gradient(farthest-side,#0000 40%,#000 41%);
  background:
    linear-gradient(0deg ,rgb(0 0 0/50%) 50%,rgb(0 0 0/100%) 0) center/4px 100%,
    linear-gradient(90deg,rgb(0 0 0/25%) 50%,rgb(0 0 0/75% ) 0) center/100% 4px;
  background-repeat: no-repeat;
  animation: s3 1s infinite steps(12);
}
.spinner-3::before,
.spinner-3::after {
   content:"";
   grid-area: 1/1;
   border-radius: 50%;
   background:inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.spinner-3::after {
   opacity: 0.83;
   transform: rotate(60deg);
}

@keyframes s3 {
  100% {transform: rotate(1turn)}
}

.spinner-4 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 8px solid #0000;
  border-right-color: #ffa50097;
  position: relative;
  animation: s4 1s infinite linear;
}
.spinner-4:before,
.spinner-4:after {
  content: "";
  position: absolute;
  inset:-8px;
  border-radius: 50%;
  border:inherit;
  animation:inherit;
  animation-duration: 2s;
}
.spinner-4:after {
  animation-duration: 4s;
}

@keyframes s4 {
  100% {transform: rotate(1turn)}
}


.spinner-5 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background:#514b82;
  -webkit-mask:radial-gradient(circle closest-side at 50% 40%,#0000 94%, #000);
  transform-origin: 50% 40%;
  animation: s5 1s infinite linear;
}

@keyframes s5 {
  100% {transform: rotate(1turn)}
}

.spinner-6 {
  width: 40px;
  height: 10px;
  color: #f03355;
  background:
    radial-gradient(farthest-side,currentColor 90%,#0000) left  /10px 10px,
    radial-gradient(farthest-side,currentColor 90%,#0000) center/10px 10px,
    radial-gradient(farthest-side,currentColor 90%,#0000) right /10px 10px,
    linear-gradient(currentColor 0 0) center/100% 4px; 
  background-repeat: no-repeat;
  position: relative;
  animation: s6 2s infinite linear;
}
.spinner-6:before,
.spinner-6:after {
  content: "";
  position: absolute;
  inset:0;
  background:inherit;
  animation:inherit;
  --s:calc(50% - 5px);
  animation-direction: reverse;
}
.spinner-6:after {
  --s:calc(5px - 50%);
}

@keyframes s6 {
  0%   {transform: translate(var(--s,0)) rotate(0)}
  100% {transform: translate(var(--s,0)) rotate(1turn)}
}

.spinner-7 {
  --d:22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: #25b09b;
  box-shadow: 
    calc(1*var(--d))      calc(0*var(--d))     0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d))      calc(1*var(--d))     0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d))     calc(0*var(--d))     0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d))      calc(-1*var(--d))    0 6px;
  animation: s7 1s infinite steps(8);
}

@keyframes s7 {
  100% {transform: rotate(1turn)}
}

.spinner-8 {
  width: 50px;
  height: 50px;
  display: grid;
  color: #514b82;
  background: 
    linear-gradient(currentColor 0 0) center/100% 3px,
    linear-gradient(currentColor 0 0) center/3px 100%;
  background-repeat: no-repeat;
  animation: s8 2s infinite;
}

.spinner-8::before,
.spinner-8::after {
  content: "";
  grid-area: 1/1;
  background: repeating-conic-gradient(#0000 0 35deg,currentColor 0 90deg);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
  border-radius: 50%;
}
.spinner-8::after {
  margin:20%;
}

@keyframes s8 {
  100% {transform: rotate(1turn)}
}

.spinner-9 {
  --s:8px;
  width: 50px;
  height: 50px;
  background: orange;
  border-radius: 50%;
  animation: s9 2s infinite linear;
  clip-path: polygon(0 0,calc(50% - var(--s)) 0,50% var(--s),calc(50% + var(--s)) 0,100% 0,100% calc(50% - var(--s)),calc(100% - var(--s)) 50%,100% calc(50% + var(--s)),100% 100%,calc(50% + var(--s)) 100%, 50% calc(100% - var(--s)),calc(50% - var(--s)) 100%,0 100%,0 calc(50% + var(--s)), var(--s) 50%, 0 calc(50% - var(--s)));
}

@keyframes s9 {
  100% {transform: rotate(1turn)}
}

.spinner-10 {
  --R:30px;
  --g1:#514b82 96%, #0000;
  --g2:#eeeeee 96%, #0000;
  width: calc(2*var(--R));
  height:calc(2*var(--R));
  border-radius:50%;
  display: grid;
  -webkit-mask:linear-gradient(#000 0 0);
  animation: s10 2s infinite linear;
}

.spinner-10::before,
.spinner-10::after{
  content:"";
  grid-area: 1/1;
  width:50%;
  background:
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) + 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(var(--R) + 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
    radial-gradient(farthest-side,var(--g1)) 0 calc(-1*var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(var(--R) - 0.5*var(--R)   - var(--R)) calc(var(--R) - 0.866*var(--R) - var(--R)),
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) - 0.5*var(--R)   - var(--R)),
    radial-gradient(farthest-side,var(--g2)) calc(-1*var(--R))  0,
    radial-gradient(farthest-side,var(--g1)) calc(var(--R) - 0.866*var(--R) - var(--R)) calc(var(--R) + 0.5*var(--R)   - var(--R));
   background-size:calc(2*var(--R)) calc(2*var(--R));
   background-repeat:no-repeat;
}

.spinner-10::after {
 transform:rotate(180deg);
 transform-origin:right;
}

@keyframes s10 {
  100% {transform: rotate(-1turn)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}


* {
  box-sizing: border-box;
}

loader.html

<h2>Source: https://dev.to/afif/i-made-100-more-css-loaders-for-your-next-project-4ioa</h2>

<div class="spinner-1"></div>
<div class="spinner-2"></div>
<div class="spinner-3"></div>
<div class="spinner-4"></div>
<div class="spinner-5"></div>
<div class="spinner-6"></div>
<div class="spinner-7"></div>
<div class="spinner-8"></div>
<div class="spinner-9"></div>
<div class="spinner-10"></div>