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);
        }
    }
}


/**===== dots3 =====*/
#dots3 {
  display: block;
  position: absolute;
  bottom: -70px;
  left: 50%;
  height: 50px;
  width: 50px;
  margin: -25px 0 0 -25px;
}

#dots3 span {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  -webkit-animation: dots3 1.5s infinite ease-out;
          animation: dots3 1.5s infinite ease-out;
}

#dots3 span:nth-child(1) {
  left: 0px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#dots3 span:nth-child(2) {
  left: 15px;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

#dots3 span:nth-child(3) {
  left: 30px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

#dots3 span:nth-child(4) {
  left: 45px;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

@keyframes dots3 {
  0% {
    background: #000000;
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
  }
  50% {
    background: rgba(0, 0, 0, 0.25);
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    background: #000000;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes dots3 {
  0% {
    background: #000000;
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
  }
  50% {
    background: rgba(0, 0, 0, 0.25);
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    background: #000000;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}