Pure css circle loading

by huynguyen2015

HTML

<div class="loader-wrapper">
   <header class="header">
      <h1>Pure CSS Circle Loader</h1>
      <p>
        <a href="https://x.com/dfgefgef11" title="1hour.dev pure css loading" target="_blank">by dfgefgef</a> (@Twitter)
      </p>
      <p>Find more tips at <a href="https://www.1hour.dev" title="1hour.dev pure css loading" target="_blank">1hour.dev</a></p>
  </header>
  <div class="list-loader">
    <div class="loader-item">
      <!--Main loader tag-->
      <div class="loader-1"></div>    
    </div>
    <div class="loader-item">
      <div class="loader-2"><span></span></div>
    </div>
    <div class="loader-item">
      <div class="loader-3"><span></span></div>
    </div>
  </div>
</div>

CSS

.loader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.header h1 {
  line-height: 36px;
  font-family: "Poppins", sans-serif;
}
.header p {
  line-height: 24px;
  margin: 0;
}

.list-loader {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
}
.loader-item {
  position: relative;
  display: flex;
  justify-content: center;
}

/* LOADING EFFECT NUMBER 1*/
.loader-1 {
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background:
    linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
    linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
  background-repeat: no-repeat;
  animation: loader-1-animate 1s infinite steps(12);
}
.loader-1::before,
.loader-1::after {
   content: "";
   grid-area: 1/1;
   border-radius: 50%;
   background: inherit;
   opacity: 0.915;
   transform: rotate(30deg);
}
.loader-1::after {
   opacity: 0.83;
   transform: rotate(60deg);
}
@keyframes loader-1-animate {
  100% {transform: rotate(1turn)}
}

/* LOADING EFFECT NUMBER 2*/
.loader-2 {
	height: 50px;
	width: 50px;
	-webkit-animation: loader-2-1 4.8s linear infinite;
	        animation: loader-2-1 4.8s linear infinite;
}
@-webkit-keyframes loader-2-1 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes loader-2-1 {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.loader-2 span {
	display: block;
	position: absolute;
	top: 0; left: 0;
	bottom: 0; right: 0;
	margin: auto;
	height: 50px;
	width: 50px;
	clip: rect(0, 50px, 50px, 25px);
	-webkit-animation: loader-2-2 1.2s linear infinite;
	        animation: loader-2-2 1.2s linear infinite;
}
@-webkit-keyframes loader-2-2 {
	0%   { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform:...