Dark Ripple Pre-Loader | Learning Axis

HTML

CSS

#pre-load{
  background:#000;
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999
}
#pre-load .loader-inner{
  --loader-background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);
  position:relative;
  height:250px;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center
}
#pre-load .loader-inner .box{
  position:absolute;
  background:var(--loader-background);
  border-radius:50%;
  border-top:1px solid rgb(100,100,100);
  box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;
  backdrop-filter:blur(5px);
  animation:ripple 2s infinite ease-in-out
}
#pre-load .loader-inner .box:nth-child(1){
  width:25%;
  aspect-ratio:1/1;
  z-index:99
}
#pre-load .loader-inner .box:nth-child(2){
  inset:30%;
  z-index:98;
  border-color:rgba(100,100,100,.8);
  animation-delay:.2s
}
#pre-load .loader-inner .box:nth-child(3){
  inset:20%;
  z-index:97;
  border-color:rgba(100,100,100,.6);
  animation-delay:.4s
}
#pre-load .loader-inner .box:nth-child(4){
  inset:10%;
  z-index:96;
  border-color:rgba(100,100,100,.4);
  animation-delay:.6s
}
#pre-load .loader-inner .box:nth-child(5){
  inset:0;
  z-index:95;
  border-color:rgba(100,100,100,.2);
  animation-delay:.8s
}
@keyframes ripple{
  0%{
    transform:scale(1);
    box-shadow:rgba(0,0,0,.3) 0 10px 10px 0
  }
  50%{
    transform:scale(1.3);
    box-shadow:rgba(0,0,0,.3) 0 30px 20px 0
  }
  100%{
    transform:scale(1);
    box-shadow:rgba(0,0,0,.3) 0 10px 10px 0
  }
}
@keyframes color-change{
  0%{
    opacity:.7
  }
  50%{
    opacity:1
  }
  100%{
    opacity:.7
  }
}