#loaded {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 999999;
  overflow: visible;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #f2f4f7;
}

.box {
    display: none;
}

.catatan {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #0b1859;
  text-align: center;
}

/* Spinner animation */
.loader-one {
    width: 100px;
    height: 100px;
    position: relative;
    perspective: 780px;
  }
  .loader-one .circle {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
  }
  .loader-one .one {
    border: 5px solid LightSkyBlue;
    -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite;
  }
  .loader-one .two {
    border: 5px solid LightCoral;
    -webkit-animation: spin2 1.5s linear infinite;
            animation: spin2 1.5s linear infinite;
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
  }
  .loader-one .three {
    border: 5px solid SpringGreen;
    -webkit-animation: spin3 1.5s linear infinite;
            animation: spin3 1.5s linear infinite;
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
  }
  
  @-webkit-keyframes spin {
    0% {
      transform: rotateX(0) rotateY(45deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(45deg);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotateX(0) rotateY(45deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(45deg);
    }
  }
  @-webkit-keyframes spin2 {
    0% {
      transform: rotateX(45deg) rotateY(0) scale(0.75);
    }
    100% {
      transform: rotateX(45deg) rotateY(360deg) scale(0.75);
    }
  }
  @keyframes spin2 {
    0% {
      transform: rotateX(45deg) rotateY(0) scale(0.75);
    }
    100% {
      transform: rotateX(45deg) rotateY(360deg) scale(0.75);
    }
  }
  @-webkit-keyframes spin3 {
    0% {
      transform: rotateX(0) rotateY(0) scale(0.5);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg) scale(0.5);
    }
  }
  @keyframes spin3 {
    0% {
      transform: rotateX(0) rotateY(0) scale(0.5);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg) scale(0.5);
    }
  }
  .loader-two {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .loader-two .circle {
    height: 10px;
    width: 10px;
    position: absolute;
    background: #0b1859;
    transform-origin: 50% 50%;
    border-radius: 50%;
    -webkit-animation: fade 0.8s linear infinite;
            animation: fade 0.8s linear infinite;
  }
  .loader-two .circle-1 {
    top: 0;
    left: calc(50% - 5px);
  }
  .loader-two .circle-2 {
    top: calc(17.5% - 5px);
    left: calc(82.5% - 5px);
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
  }
  .loader-two .circle-3 {
    top: calc(50% - 5px);
    right: 0;
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
  }
  .loader-two .circle-4 {
    top: calc(82.5% - 5px);
    left: calc(82.5% - 5px);
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
  }
  .loader-two .circle-5 {
    left: calc(50% - 5px);
    bottom: 0;
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
  }
  .loader-two .circle-6 {
    top: calc(82.5% - 5px);
    left: calc(17.5% - 5px);
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
  .loader-two .circle-7 {
    top: calc(50% - 5px);
    left: 0;
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
  }
  .loader-two .circle-8 {
    top: calc(17.5% - 5px);
    left: calc(17.5% - 5px);
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
  }
  
  @-webkit-keyframes fade {
    0% {
      opacity: 1;
      transform: scale(1.5);
    }
    80% {
      opacity: 0;
      transform: scale(0);
    }
  }
  
  @keyframes fade {
    0% {
      opacity: 1;
      transform: scale(1.5);
    }
    80% {
      opacity: 0;
      transform: scale(0);
    }
  }
  .loader-three {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .loader-three .bar {
    height: 10px;
    background: Salmon;
    border-radius: 5px;
    opacity: 0.5;
    position: absolute;
    top: calc(50% - 5px);
    -webkit-animation: stripe 2s linear infinite;
            animation: stripe 2s linear infinite;
    position: absolute;
  }
  .loader-three .ball {
    width: 10px;
    height: 10px;
    background: Salmon;
    top: calc(50% - 5px);
    border-radius: 5px;
    position: absolute;
    -webkit-animation: ball-bounce 2s linear infinite;
            animation: ball-bounce 2s linear infinite;
  }
  
  @-webkit-keyframes stripe {
    0% {
      width: 10px;
      left: 0;
    }
    25% {
      width: 100%;
      left: 0;
    }
    50% {
      width: 10px;
      left: calc(100% - 10px);
    }
    75% {
      width: 100%;
      left: 0;
    }
    100% {
      width: 25px;
      left: 0;
    }
  }
  
  @keyframes stripe {
    0% {
      width: 10px;
      left: 0;
    }
    25% {
      width: 100%;
      left: 0;
    }
    50% {
      width: 10px;
      left: calc(100% - 10px);
    }
    75% {
      width: 100%;
      left: 0;
    }
    100% {
      width: 25px;
      left: 0;
    }
  }
  @-webkit-keyframes ball-bounce {
    0% {
      left: 0;
    }
    25% {
      left: calc(100% - 10px);
    }
    50% {
      left: calc(100% - 10px);
    }
    75% {
      left: 0;
    }
    100% {
      left: 0;
    }
  }
  @keyframes ball-bounce {
    0% {
      left: 0;
    }
    25% {
      left: calc(100% - 10px);
    }
    50% {
      left: calc(100% - 10px);
    }
    75% {
      left: 0;
    }
    100% {
      left: 0;
    }
  }
  .loader-four {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 780px;
  }
  .loader-four .dice {
    width: 50px;
    height: 50px;
    -webkit-animation: dice-rotate 3s linear infinite;
            animation: dice-rotate 3s linear infinite;
    transform-style: preserve-3d;
    transform-origin: 50% 50% -25px;
  }
  .loader-four .side {
    border: 2px solid #fff;
    border-radius: 1px;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .loader-four .side.one {
    background: PowderBlue;
    width: 50px;
    height: 50px;
    position: absolute;
    transform: rotateY(-90deg) translateX(-50px);
    transform-origin: 0 50%;
  }
  .loader-four .side.two {
    background: LightBlue;
    width: 50px;
    height: 50px;
    position: absolute;
    transform: rotateX(90deg) translateY(-50px);
    transform-origin: 50% 0;
  }
  .loader-four .side.three {
    background: SkyBlue;
    width: 50px;
    height: 50px;
    position: absolute;
    transform: rotateY(90deg) translateX(50px);
    transform-origin: 100% 50%;
  }
  .loader-four .side.four {
    background: DeepSkyBlue;
    width: 50px;
    height: 50px;
    position: absolute;
    transform: rotateX(-90deg) translateY(50px);
    transform-origin: 50% 100%;
  }
  .loader-four .side.five {
    background: CornflowerBlue;
    width: 50px;
    height: 50px;
    position: absolute;
    transform: rotateX(180deg) translateZ(50px);
  }
  .loader-four .side.six {
    background: RoyalBlue;
    width: 50px;
    height: 50px;
    position: absolute;
  }
  
  @-webkit-keyframes dice-rotate {
    0% {
      transform: rotateX(0deg) rotateY(0) rotateZ(0);
    }
    50% {
      transform: rotateX(180deg) rotateY(360deg) rotateZ(0);
    }
    100% {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(0);
    }
  }
  
  @keyframes dice-rotate {
    0% {
      transform: rotateX(0deg) rotateY(0) rotateZ(0);
    }
    50% {
      transform: rotateX(180deg) rotateY(360deg) rotateZ(0);
    }
    100% {
      transform: rotateX(360deg) rotateY(720deg) rotateZ(0);
    }
  }
  .loader-five {
    width: 100px;
    height: 100px;
    position: relative;
    perspective: 200px;
  }
  .loader-five .spinner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    box-sizing: border-box;
  }
  .loader-five .one {
    border-right: 5px solid Coral;
    -webkit-animation: spinner-one 1.5s linear infinite;
            animation: spinner-one 1.5s linear infinite;
  }
  .loader-five .two {
    border-bottom: 5px solid DeepPink;
    -webkit-animation: spinner-two 1.5s linear infinite;
            animation: spinner-two 1.5s linear infinite;
  }
  .loader-five .three {
    border-left: 5px solid Plum;
    -webkit-animation: spinner-three 1.5s linear infinite;
            animation: spinner-three 1.5s linear infinite;
  }
  
  @-webkit-keyframes spinner-one {
    0% {
      transform: rotateX(45deg) rotateY(15deg) rotateZ(0);
    }
    100% {
      transform: rotateX(45deg) rotateY(15deg) rotateZ(360deg);
    }
  }
  
  @keyframes spinner-one {
    0% {
      transform: rotateX(45deg) rotateY(15deg) rotateZ(0);
    }
    100% {
      transform: rotateX(45deg) rotateY(15deg) rotateZ(360deg);
    }
  }
  @-webkit-keyframes spinner-two {
    0% {
      transform: rotateX(-45deg) rotateY(60deg) rotateZ(0);
    }
    100% {
      transform: rotateX(-45deg) rotateY(60deg) rotateZ(360deg);
    }
  }
  @keyframes spinner-two {
    0% {
      transform: rotateX(-45deg) rotateY(60deg) rotateZ(0);
    }
    100% {
      transform: rotateX(-45deg) rotateY(60deg) rotateZ(360deg);
    }
  }
  @-webkit-keyframes spinner-three {
    0% {
      transform: rotateX(25deg) rotateY(45deg) rotateZ(0);
    }
    100% {
      transform: rotateX(25deg) rotateY(45deg) rotateZ(360deg);
    }
  }
  @keyframes spinner-three {
    0% {
      transform: rotateX(25deg) rotateY(45deg) rotateZ(0);
    }
    100% {
      transform: rotateX(25deg) rotateY(45deg) rotateZ(360deg);
    }
  }
  .loader-six {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .loader-six .side {
    position: absolute;
    height: 100px;
    width: 100px;
  }
  .loader-six .side > div {
    position: absolute;
  }
  .loader-six .line {
    opacity: 0.5;
    height: 10px;
    border-radius: 5px;
  }
  .loader-six .circle {
    height: 10px;
    width: 10px;
    border-radius: 5px;
  }
  .loader-six .one {
    transform: rotate(60deg);
    -webkit-animation: triangle-side-one 3s linear infinite;
            animation: triangle-side-one 3s linear infinite;
  }
  .loader-six .two {
    transform: rotate(-60deg);
    -webkit-animation: triangle-side-two 3s linear infinite;
            animation: triangle-side-two 3s linear infinite;
  }
  .loader-six .three {
    transform: rotate(180deg);
    -webkit-animation: triangle-side-three 3s linear infinite;
            animation: triangle-side-three 3s linear infinite;
  }
  .loader-six .one div {
    background: DeepSkyBlue;
    top: 30%;
  }
  .loader-six .two div {
    background: LightGreen;
    top: 30%;
  }
  .loader-six .three div {
    background: Orchid;
    top: 30%;
  }
  .loader-six .side .line {
    -webkit-animation: triangle-line 3s linear infinite;
            animation: triangle-line 3s linear infinite;
  }
  .loader-six .side .circle {
    -webkit-animation: triangle-circle 3s linear infinite;
            animation: triangle-circle 3s linear infinite;
  }
  
  @-webkit-keyframes triangle-line {
    0% {
      width: 10px;
      left: 0;
    }
    16.66666667% {
      width: 100px;
      left: 0;
    }
    33.33333333% {
      width: 10px;
      left: 90px;
    }
    50% {
      width: 10px;
      left: 90px;
    }
    66.66666667% {
      width: 100px;
      left: 0;
    }
    83.33333333% {
      width: 10px;
      left: 0;
    }
    100% {
      width: 10px;
      left: 0;
    }
  }
  
  @keyframes triangle-line {
    0% {
      width: 10px;
      left: 0;
    }
    16.66666667% {
      width: 100px;
      left: 0;
    }
    33.33333333% {
      width: 10px;
      left: 90px;
    }
    50% {
      width: 10px;
      left: 90px;
    }
    66.66666667% {
      width: 100px;
      left: 0;
    }
    83.33333333% {
      width: 10px;
      left: 0;
    }
    100% {
      width: 10px;
      left: 0;
    }
  }
  @-webkit-keyframes triangle-circle {
    0% {
      left: 0;
    }
    16.66666667% {
      left: 90px;
    }
    33.33333333% {
      left: 90px;
    }
    50% {
      left: 90px;
    }
    66.66666667% {
      left: 0;
    }
    83.33333333% {
      left: 0;
    }
    100% {
      left: 0;
    }
  }
  @keyframes triangle-circle {
    0% {
      left: 0;
    }
    16.66666667% {
      left: 90px;
    }
    33.33333333% {
      left: 90px;
    }
    50% {
      left: 90px;
    }
    66.66666667% {
      left: 0;
    }
    83.33333333% {
      left: 0;
    }
    100% {
      left: 0;
    }
  }
  @-webkit-keyframes triangle-side-one {
    0% {
      transform: rotate(60deg);
    }
    16.66666667% {
      transform: rotate(60deg);
    }
    33.33333333% {
      transform: rotate(60deg);
    }
    50% {
      transform: rotate(-120deg);
    }
    66.66666667% {
      transform: rotate(-120deg);
    }
    83.33333333% {
      transform: rotate(-120deg);
    }
    100% {
      transform: rotate(-300deg);
    }
  }
  @keyframes triangle-side-one {
    0% {
      transform: rotate(60deg);
    }
    16.66666667% {
      transform: rotate(60deg);
    }
    33.33333333% {
      transform: rotate(60deg);
    }
    50% {
      transform: rotate(-120deg);
    }
    66.66666667% {
      transform: rotate(-120deg);
    }
    83.33333333% {
      transform: rotate(-120deg);
    }
    100% {
      transform: rotate(-300deg);
    }
  }
  @-webkit-keyframes triangle-side-two {
    0% {
      transform: rotate(-60deg);
    }
    16.66666667% {
      transform: rotate(-60deg);
    }
    33.33333333% {
      transform: rotate(-60deg);
    }
    50% {
      transform: rotate(-240deg);
    }
    66.66666667% {
      transform: rotate(-240deg);
    }
    83.33333333% {
      transform: rotate(-240deg);
    }
    100% {
      transform: rotate(-420deg);
    }
  }
  @keyframes triangle-side-two {
    0% {
      transform: rotate(-60deg);
    }
    16.66666667% {
      transform: rotate(-60deg);
    }
    33.33333333% {
      transform: rotate(-60deg);
    }
    50% {
      transform: rotate(-240deg);
    }
    66.66666667% {
      transform: rotate(-240deg);
    }
    83.33333333% {
      transform: rotate(-240deg);
    }
    100% {
      transform: rotate(-420deg);
    }
  }
  @-webkit-keyframes triangle-side-three {
    0% {
      transform: rotate(180deg);
    }
    16.66666667% {
      transform: rotate(180deg);
    }
    33.33333333% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(0);
    }
    66.66666667% {
      transform: rotate(0);
    }
    83.33333333% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(-180deg);
    }
  }
  @keyframes triangle-side-three {
    0% {
      transform: rotate(180deg);
    }
    16.66666667% {
      transform: rotate(180deg);
    }
    33.33333333% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(0);
    }
    66.66666667% {
      transform: rotate(0);
    }
    83.33333333% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(-180deg);
    }
  }