#loader{ width: 100%; height: 100%; background: var(--color-bg); position: fixed; top: 0px; left: 0px; z-index: 9999; display: flex; align-items: center; justify-content: center;}
/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 1;
  display: flex;
}
.loader::before,
.loader::after {
  content:"";
  flex:1;
  animation: l14 1.5s -.25s infinite linear alternate both;
}
.loader::after {
  --s:-1,-1;
  animation-delay: .5s;
}
@keyframes l14 {
  0%,
  30%  {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:#FA6900; border-radius: 100px 0 0 100px}
  37.5%{transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:#FA6900; border-radius: 100px 0 0 100px}
  50%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-90deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:#FA6900; border-radius: 100px 0 0 100px;}
  50.01%{transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-90.1deg);
         clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
         background:#cc0000;
         border-radius: 100px 0 0 100px}
  62.5%{transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:#cc0000;
        border-radius: 100px 0 0 100px}
  70%,
  100%{transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg);
        clip-path:polygon(0 0,100% 0,100% 100%,50% 100%,0 100%,0 25%);
        background:#cc0000;
        border-radius: 100px 0 0 100px;}
}