.loader {
  width: 60px;
    height: 60px;
    gap: 5px;
    padding: 5px;
    position: relative;
    top: 50%;
    margin: auto;
    z-index: 50
  }

  .preloader {
    background-color: rgba(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    -webkit-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
    margin: 0 auto
  }

  .g--circle {
    transform-origin: 60px 60px;
    fill: #e2b591;
    animation: opacity 1.2s linear infinite
  }

  .g--circle:nth-child(12n+1) {
    animation-delay: -.1s;
    transform: rotate(-30deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+2) {
    animation-delay: -.2s;
    transform: rotate(-60deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+3) {
    animation-delay: -.3s;
    transform: rotate(-90deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+4) {
    animation-delay: -.4s;
    transform: rotate(-120deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+5) {
    animation-delay: -.5s;
    transform: rotate(-150deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+6) {
    animation-delay: -.6s;
    transform: rotate(-180deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+7) {
    animation-delay: -.7s;
    transform: rotate(-210deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+8) {
    animation-delay: -.8s;
    transform: rotate(-240deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+9) {
    animation-delay: -.9s;
    transform: rotate(-270deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+10) {
    animation-delay: -1s;
    transform: rotate(-300deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+11) {
    animation-delay: -1.1s;
    transform: rotate(-330deg) translate(5PX, 5PX) scale(.9)
  }

  .g--circle:nth-child(12n+12) {
    animation-delay: -1.2s;
    transform: rotate(-360deg) translate(5PX, 5PX) scale(.9)
  }

  .g-circles--loading .g--circle {
    fill-opacity: 1;
    fill: gray;
    animation-name: opacity, maincolor
  }

  .g-circles--loading .u--circle {
    animation: transformloading 1.2s linear infinite
  }

  .g-circles--loading .g--circle:nth-child(12n+1) .u--circle {
    animation-delay: -.1s
  }

  .g-circles--loading .g--circle:nth-child(12n+2) .u--circle {
    animation-delay: -.2s
  }

  .g-circles--loading .g--circle:nth-child(12n+3) .u--circle {
    animation-delay: -.3s
  }

  .g-circles--loading .g--circle:nth-child(12n+4) .u--circle {
    animation-delay: -.4s
  }

  .g-circles--loading .g--circle:nth-child(12n+5) .u--circle {
    animation-delay: -.5s
  }

  .g-circles--loading .g--circle:nth-child(12n+6) .u--circle {
    animation-delay: -.6s
  }

  .g-circles--loading .g--circle:nth-child(12n+7) .u--circle {
    animation-delay: -.7s
  }

  .g-circles--loading .g--circle:nth-child(12n+8) .u--circle {
    animation-delay: -.8s
  }

  .g-circles--loading .g--circle:nth-child(12n+9) .u--circle {
    animation-delay: -.9s
  }

  .g-circles--loading .g--circle:nth-child(12n+10) .u--circle {
    animation-delay: -1s
  }

  .g-circles--loading .g--circle:nth-child(12n+11) .u--circle {
    animation-delay: -1.1s
  }

  .g-circles--loading .g--circle:nth-child(12n+12) .u--circle {
    animation-delay: -1.2s
  }

  @keyframes opacity {
    3% {
      fill-opacity: 1
    }

    75% {
      fill-opacity: .5
    }
  }

  @keyframes maincolor {
    0% {
      fill: #d2d2d2
    }

    100% {
      fill: #e2b591
    }
  }

  @keyframes transformloading {
    10% {
      transform-origin: 70px 70px;
      transform: scale(.75)
    }
  }