kikikan/backend/resources/sass/base/_loader.scss

@use "sass:math";

.loader2-wrap{
    display: none;

    width: 100vw;
    height: 100vh;
    background-color: rgb(0,0,0,0.6);
    top: 0px;
    position: fixed;
    
    .loading {
      position: fixed;
      
      margin: auto;
      width: 4rem;
      height: 4rem;
      transform-style: preserve-3d;
      perspective: 800px;

      top: calc(50vh - 2rem);
      left: calc(50vw - 2rem);
    
      .arc {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border-bottom: 5px solid white;
    
        @for $i from 1 through 3 {
          &:nth-child(#{$i}) {
            animation: rotate#{$i} 1.15s linear infinite;
          }
        }
    
        &:nth-child(1) {
          animation-delay: -0.8s;
        }
    
        &:nth-child(2) {
          animation-delay: -0.4s;
        }
    
        &:nth-child(3) {
          animation-delay: 0s;
        }
      }
    }
    
    @keyframes rotate1 {
      from {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
      }
    
      to {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
      }
    }
    
    @keyframes rotate2 {
      from {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
      }
    
      to {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
      }
    }
    
    @keyframes rotate3 {
      from {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
      }
    
      to {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
      }
    }

}
  

.loader1-wrap {
    display: none;
    background-color: rgb(0,0,0,0.4);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;

    .ring {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width:150px;
        height:150px;
        background:#262626;
        border:3px solid #3c3c3c;
        border-radius:50%;
        text-align:center;
        line-height:150px;
        font-family:sans-serif;
        font-size:20px;
        color:#fff000;
        letter-spacing:4px;
        text-transform:uppercase;
        text-shadow:0 0 10px #fff000;
        box-shadow:0 0 20px rgba(0,0,0,.5);
    }
    .ring:before {
        content:'';
        position:absolute;
        top:-3px;
        left:-3px;
        width:150px;
        height:150px;
        border:3px solid transparent;
        border-top:3px solid #fff000;
        border-right:3px solid #fff000;
        border-radius:50%;
        animation:animateC 2s linear infinite;
    }
    #loading {
        display:block;
        position:absolute;
        top:calc(50% - 2px);
        left:50%;
        width:50%;
        height:4px;
        background:transparent;
        transform-origin:left;
        animation:animate 2s linear infinite;
    }
    #loading:before {
        content:'';
        position:absolute;
        width:16px;
        height:16px;
        border-radius:50%;
        background:#fff000;
        top:-6px;
        right:-8px;
        box-shadow:0 0 20px #fff000;
    }

    @keyframes animateC
    {
        0% {
            transform:rotate(0deg);
        }
        100% {
            transform:rotate(360deg);
        }
    }
    @keyframes animate
    {
        0% {
            transform:rotate(45deg);
        }
        100% {
            transform:rotate(405deg);
        }
    }
}