Code Grid:

{"settings":{"resources":[],"title":"Loading Spinners"},"code":{"html":"%3Ch1%3ECSS%20Spinners%20%26amp%3B%20Loaders%3C%2Fh1%3E%0A%3Cdiv%20class%3D%22sep%22%3E%3C%2Fdiv%3E%0A%3Cdiv%20class%3D%22container%22%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader1%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader2%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader3%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader4%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader5%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader6%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader7%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader8%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader9%22%3E%3C%2Fdiv%3E%0A%20%20%3Cdiv%20class%3D%22loader%20loader10%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E","js":"","css":"body%7B%0A%20%20background%3Ablack%3B%0A%20%20color%3Awhite%3B%0A%20%20display%3Aflex%3B%0A%20%20flex-direction%3Acolumn%3B%0A%20%20align-items%3Acenter%3B%0A%7D%0A%40keyframes%20glow%7B%0A%20%2050%25%7B%0A%20%20%20%20border-color%3Alime%3B%0A%20%20%20%20width%3A95%25%3B%0A%20%20%20%20box-shadow%3A0px%200px%2010px%20-2px%20green%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20border-color%3Agreen%3B%0A%20%20%20%20width%3A35%25%3B%0A%20%20%20%20box-shadow%3A0px%200px%2010px%20-2px%20green%3B%0A%20%20%7D%0A%7D%0A.sep%7B%0A%20%20width%3A35%25%3B%0A%20%20border-bottom%3A2px%20solid%20green%3B%0A%20%20margin-bottom%3A20px%3B%0A%20%20animation%3Aglow%208s%20infinite%3B%0A%7D%0A.container%7B%0A%20%20display%3Aflex%3B%0A%20%20align-items%3Acenter%3B%0A%20%20justify-content%3Acenter%3B%0A%20%20background%3Ablack%3B%0A%20%20width%3A75%25%3B%0A%20%20padding%3A10%25%3B%0A%20%20flex-wrap%3Awrap%3B%0A%7D%0A.loader%7B%0A%20%20width%3A100px%3B%0A%20%20height%3A100px%3B%0A%20%20display%3Aflex%3B%0A%20%20justify-content%3Acenter%3B%0A%20%20align-items%3Acenter%3B%0A%20%20margin%3A10px%2020px%3B%0A%7D%0A%40keyframes%20load%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%20scale(0.2)%3B%0A%20%20%20%20border-color%3Aorange%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%20scale(1.1)%3B%0A%20%20%7D%0A%7D%0A.loader1%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A30px%3B%0A%20%20width%3A30px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A45%25%3B%0A%20%20border%3A25px%20dotted%20lime%3B%0A%20%20animation%3Aload%201s%20infinite%20ease-in-out%3B%0A%7D%0A%0A%40keyframes%20load2%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%3B%0A%20%20%20%20border-radius%3A55%25%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%3B%0A%20%20%7D%0A%7D%0A.loader2%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A30px%3B%0A%20%20width%3A30px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A10%25%3B%0A%20%20border%3A25px%20inset%20orange%3B%0A%20%20animation%3Aload2%201s%20infinite%20ease-in-out%3B%0A%7D%0A%40keyframes%20load3%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%20scale(1.5)%3B%0A%20%20%20%20border-style%3Adotted%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%20scale(0.9)%3B%0A%20%20%7D%0A%7D%0A.loader3%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A30px%3B%0A%20%20width%3A30px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A15px%20solid%20blue%3B%0A%20%20border-color%3A%231565C0%20%2326C6DA%3B%0A%20%20animation%3Aload3%202s%20infinite%3B%0A%7D%0A%40keyframes%20load4%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%3B%0A%20%20%20%20border-width%3A30px%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%3B%0A%20%20%7D%0A%7D%0A.loader4%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A30px%3B%0A%20%20width%3A30px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A15px%20ridge%20lime%3B%0A%20%20border-color%3Alime%20transparent%3B%0A%20%20animation%3Aload4%201s%20infinite%3B%0A%7D%0A%40keyframes%20load5%7B%0A%20%2040%25%7B%0A%20%20%20%20transform%3Arotatez(-180deg)%3B%0A%20%20%20%20border-width%3A16px%3B%0A%20%20%7D%0A%20%2080%25%7B%0A%20%20%20%20transform%3Arotatez(-360deg)%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(-360deg)%3B%0A%20%20%7D%0A%7D%0A.loader5%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A50px%3B%0A%20%20width%3A50px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A10px%20dotted%20lime%3B%0A%20%20border-left-color%3Atransparent%3B%0A%20%20animation%3Aload5%201s%20infinite%20ease-in-out%3B%0A%7D%0A%40keyframes%20load6%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%3B%0A%20%20%20%20border-width%3A40px%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%3B%0A%20%20%7D%0A%7D%0A.loader6%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A0px%3B%0A%20%20width%3A0px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A35px%20ridge%20red%3B%0A%20%20border-color%3Aindigo%20lime%20yellow%20orangered%3B%0A%20%20animation%3Aload6%20.5s%20infinite%3B%0A%7D%0A%40keyframes%20load7%7B%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%3B%0A%20%20%7D%0A%7D%0A.loader7%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A50px%3B%0A%20%20width%3A50px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A10px%20solid%20blue%3B%0A%20%20border-color%3A%230277BD%20%230277BD%20%230277BD%20%2381D4FA%3B%0A%20%20animation%3Aload7%20.6s%20infinite%20ease-in-out%3B%0A%20%20box-shadow%3A0px%200px%2040px%20-2px%20skyblue%3B%0A%7D%0A%0A%40keyframes%20load8%7B%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%3B%0A%20%20%7D%0A%7D%0A.loader8%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A50px%3B%0A%20%20width%3A50px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A10px%20solid%20transparent%3B%0A%20%20border-color%3A%23039BE5%20%23039BE5%20transparent%20transparent%3B%0A%20%20animation%3Aload8%20.6s%20infinite%3B%0A%7D%0A%40keyframes%20load9%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%20scale(0.6)%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%20scale(1)%3B%0A%20%20%7D%0A%7D%0A.loader9%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A50px%3B%0A%20%20width%3A50px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A20px%20dashed%20transparent%3B%0A%20%20border-color%3A%23039BE5%20indianred%3B%0A%20%20animation%3Aload9%20.6s%20infinite%20ease-in-out%3B%0A%7D%0A%0A%40keyframes%20load10%7B%0A%20%2050%25%7B%0A%20%20%20%20transform%3Arotatez(180deg)%3B%0A%20%20%20%20border-style%3Adashed%3B%0A%20%20%20%20border-color%3Ared%20maroon%20indianred%20orangered%3B%0A%20%20%7D%0A%20%20100%25%7B%0A%20%20%20%20transform%3Arotatez(360deg)%3B%0A%20%20%7D%0A%7D%0A.loader10%3A%3Abefore%7B%0A%20%20content%3A%22%22%3B%0A%20%20color%3Awhite%3B%0A%20%20height%3A50px%3B%0A%20%20width%3A50px%3B%0A%20%20background%3Atransparent%3B%0A%20%20border-radius%3A50%25%3B%0A%20%20border%3A20px%20solid%20red%3B%0A%20%20animation%3Aload10%201s%20infinite%3B%0A%7D"}}

<h1>CSS Spinners &amp; Loaders</h1>
<div class="sep"></div>
<div class="container">
  <div class="loader loader1"></div>
  <div class="loader loader2"></div>
  <div class="loader loader3"></div>
  <div class="loader loader4"></div>
  <div class="loader loader5"></div>
  <div class="loader loader6"></div>
  <div class="loader loader7"></div>
  <div class="loader loader8"></div>
  <div class="loader loader9"></div>
  <div class="loader loader10"></div>
</div>

body{
  background:black;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
}
@keyframes glow{
  50%{
    border-color:lime;
    width:95%;
    box-shadow:0px 0px 10px -2px green;
  }
  100%{
    border-color:green;
    width:35%;
    box-shadow:0px 0px 10px -2px green;
  }
}
.sep{
  width:35%;
  border-bottom:2px solid green;
  margin-bottom:20px;
  animation:glow 8s infinite;
}
.container{
  display:flex;
  align-items:center;
  justify-content:center;
  background:black;
  width:75%;
  padding:10%;
  flex-wrap:wrap;
}
.loader{
  width:100px;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px 20px;
}
@keyframes load{
  50%{
    transform:rotatez(180deg) scale(0.2);
    border-color:orange;
  }
  100%{
    transform:rotatez(360deg) scale(1.1);
  }
}
.loader1::before{
  content:"";
  color:white;
  height:30px;
  width:30px;
  background:transparent;
  border-radius:45%;
  border:25px dotted lime;
  animation:load 1s infinite ease-in-out;
}

@keyframes load2{
  50%{
    transform:rotatez(180deg);
    border-radius:55%;
  }
  100%{
    transform:rotatez(360deg);
  }
}
.loader2::before{
  content:"";
  color:white;
  height:30px;
  width:30px;
  background:transparent;
  border-radius:10%;
  border:25px inset orange;
  animation:load2 1s infinite ease-in-out;
}
@keyframes load3{
  50%{
    transform:rotatez(180deg) scale(1.5);
    border-style:dotted;
  }
  100%{
    transform:rotatez(360deg) scale(0.9);
  }
}
.loader3::before{
  content:"";
  color:white;
  height:30px;
  width:30px;
  background:transparent;
  border-radius:50%;
  border:15px solid blue;
  border-color:#1565C0 #26C6DA;
  animation:load3 2s infinite;
}
@keyframes load4{
  50%{
    transform:rotatez(180deg);
    border-width:30px;
  }
  100%{
    transform:rotatez(360deg);
  }
}
.loader4::before{
  content:"";
  color:white;
  height:30px;
  width:30px;
  background:transparent;
  border-radius:50%;
  border:15px ridge lime;
  border-color:lime transparent;
  animation:load4 1s infinite;
}
@keyframes load5{
  40%{
    transform:rotatez(-180deg);
    border-width:16px;
  }
  80%{
    transform:rotatez(-360deg);
  }
  100%{
    transform:rotatez(-360deg);
  }
}
.loader5::before{
  content:"";
  color:white;
  height:50px;
  width:50px;
  background:transparent;
  border-radius:50%;
  border:10px dotted lime;
  border-left-color:transparent;
  animation:load5 1s infinite ease-in-out;
}
@keyframes load6{
  50%{
    transform:rotatez(180deg);
    border-width:40px;
  }
  100%{
    transform:rotatez(360deg);
  }
}
.loader6::before{
  content:"";
  color:white;
  height:0px;
  width:0px;
  background:transparent;
  border-radius:50%;
  border:35px ridge red;
  border-color:indigo lime yellow orangered;
  animation:load6 .5s infinite;
}
@keyframes load7{
  100%{
    transform:rotatez(360deg);
  }
}
.loader7::before{
  content:"";
  color:white;
  height:50px;
  width:50px;
  background:transparent;
  border-radius:50%;
  border:10px solid blue;
  border-color:#0277BD #0277BD #0277BD #81D4FA;
  animation:load7 .6s infinite ease-in-out;
  box-shadow:0px 0px 40px -2px skyblue;
}

@keyframes load8{
  100%{
    transform:rotatez(360deg);
  }
}
.loader8::before{
  content:"";
  color:white;
  height:50px;
  width:50px;
  background:transparent;
  border-radius:50%;
  border:10px solid transparent;
  border-color:#039BE5 #039BE5 transparent transparent;
  animation:load8 .6s infinite;
}
@keyframes load9{
  50%{
    transform:rotatez(180deg) scale(0.6);
  }
  100%{
    transform:rotatez(360deg) scale(1);
  }
}
.loader9::before{
  content:"";
  color:white;
  height:50px;
  width:50px;
  background:transparent;
  border-radius:50%;
  border:20px dashed transparent;
  border-color:#039BE5 indianred;
  animation:load9 .6s infinite ease-in-out;
}

@keyframes load10{
  50%{
    transform:rotatez(180deg);
    border-style:dashed;
    border-color:red maroon indianred orangered;
  }
  100%{
    transform:rotatez(360deg);
  }
}
.loader10::before{
  content:"";
  color:white;
  height:50px;
  width:50px;
  background:transparent;
  border-radius:50%;
  border:20px solid red;
  animation:load10 1s infinite;
}