eslilo 3d clear

by jpeter06

HTML

<span class="loader">
      <svg version="1.1" x="0px" y="0px"  viewBox="0 0 100 100" 
      enable-background="new 0 0 0 0" xml:space="preserve">
        <path fill="orange" d="M 98.639778,50.157435 C 98.639778,23.299818 76.857617,1.5176613 50,1.5176613 23.142383,1.5176613 1.3602219,23.299818 1.3602219,50.157435 m 8.2476145,0 C 9.6078364,27.952319 27.583407,9.7652734 50,9.7652734 c 22.416593,0 40.392164,18.1870456 40.392164,40.3921616">
          <animateTransform 
             attributeName="transform" 
             attributeType="XML" 
             type="rotate"
             dur="1s" 
             from="0 50 50"
             to="360 50 50" 
             repeatCount="indefinite" />
        </path>
    </svg>
</span>

<div class="loader2">
    <span>
      <i></i>
    </span>
</div>

CSS

html, body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  display:flex;
  font-size:12px;
  --radius: 4rem;
  --boxs: 0.15rem;
  --insets: 0.15rem;
  --neo-shadow:#c8c9cc;
  --neo-light:#FFFFFF;
  --neo-bg: #ebecf0;
  background:var(--neo-bg);
  flex-direction:column;
  gap:1rem;
}

.loader{
  padding:0.2rem;
  background:#f2f5fc;
  box-shadow:var(--boxs) var(--boxs)  calc(var(--boxs) * 2) var(--boxs)  #cfd6e3, calc(var(--boxs) * -1)  calc(var(--boxs) * -1)  calc(var(--boxs) * 2) var(--boxs)  #fff,  inset var(--insets) var(--insets)  calc(var(--insets) * 2) var(--neo-shadow), 
            inset calc(var(--insets) * -1) calc(var(--insets) * -1)   calc(var(--insets) * 2) var(--neo-light);
            border: 0.3rem solid var(--neo-bg);
  border-radius: 50%;
  width:var(--radius);
  height:var(--radius);
  position:relative;
}

.loader2{
  box-shadow:var(--boxs) var(--boxs)  calc(var(--boxs) * 2) var(--boxs)  #cfd6e3, calc(var(--boxs) * -1)  calc(var(--boxs) * -1)  calc(var(--boxs) * 2) var(--boxs)  #fff,  inset var(--insets) var(--insets)  calc(var(--insets) * 2) var(--neo-shadow), 
            inset calc(var(--insets) * -1) calc(var(--insets) * -1)   calc(var(--insets) * 2) var(--neo-light);
   border: 0.3rem solid var(--neo-bg);
   border-radius: 50%;
  position:relative;
    width: 2.5rem;
    height: 2.5rem;
    padding:10px;
}

.loader2 span {
    width: 100%;
    height: 100%;
    background-color: #eaeef0;
    border: 6px solid #eaeef0;
    border-radius: 50%;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 1),
                8px 8px 25px rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.loader2 span::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5),
                inset -5px -5px 15px rgba(255, 255, 255, 1);
}

.loader2 span::after {
    content: "";
    position: absolute;
    inset: 22%;
    background: #eaeef0;
    border: 3px solid...