.q-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;

  &.q-loader-fixed {
    position: fixed;
  }

  .q-loader-parent {
    width: 100px;
    height: 100px;
    display: inline-block;
    overflow: hidden;
    background: none;
    .q-loader-children {
      @keyframes twelve-dot {
        0% {
          opacity: 1;
          backface-visibility: hidden;
          transform: translateZ(0) scale(1.2, 1.2);
        }
        100% {
          opacity: 0;
          backface-visibility: hidden;
          transform: translateZ(0) scale(1, 1);
        }
      }
      width: 100%;
      height: 100%;
      position: relative;
      transform: translateZ(0) scale(1);
      backface-visibility: hidden;
      transform-origin: 0 0;
      div {
        box-sizing: content-box;
      }
      div > div {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ffa963;
        animation: twelve-dot 0.8333333333333333s linear infinite;
      }
      div:nth-child(1) > div {
        left: 76px;
        top: 46px;
        animation-delay: -0.7638888888888887s;
      }
      > div:nth-child(1) {
        transform: rotate(0deg);
        transform-origin: 80px 50px;
      }
      div:nth-child(2) > div {
        left: 72px;
        top: 61px;
        animation-delay: -0.6944444444444443s;
      }
      > div:nth-child(2) {
        transform: rotate(30deg);
        transform-origin: 76px 65px;
      }
      div:nth-child(3) > div {
        left: 61px;
        top: 72px;
        animation-delay: -0.6249999999999999s;
      }
      > div:nth-child(3) {
        transform: rotate(60deg);
        transform-origin: 65px 76px;
      }
      div:nth-child(4) > div {
        left: 46px;
        top: 76px;
        animation-delay: -0.5555555555555555s;
      }
      > div:nth-child(4) {
        transform: rotate(90deg);
        transform-origin: 50px 80px;
      }
      div:nth-child(5) > div {
        left: 31px;
        top: 72px;
        animation-delay: -0.48611111111111105s;
      }
      > div:nth-child(5) {
        transform: rotate(120deg);
        transform-origin: 35px 76px;
      }
      div:nth-child(6) > div {
        left: 20px;
        top: 61px;
        animation-delay: -0.41666666666666663s;
      }
      > div:nth-child(6) {
        transform: rotate(150deg);
        transform-origin: 24px 65px;
      }
      div:nth-child(7) > div {
        left: 16px;
        top: 46px;
        animation-delay: -0.34722222222222215s;
      }
      > div:nth-child(7) {
        transform: rotate(180deg);
        transform-origin: 20px 50px;
      }
      div:nth-child(8) > div {
        left: 20px;
        top: 31px;
        animation-delay: -0.27777777777777773s;
      }
      > div:nth-child(8) {
        transform: rotate(210deg);
        transform-origin: 24px 35px;
      }
      div:nth-child(9) > div {
        left: 31px;
        top: 20px;
        animation-delay: -0.20833333333333331s;
      }
      > div:nth-child(9) {
        transform: rotate(240deg);
        transform-origin: 35px 24px;
      }
      div:nth-child(10) > div {
        left: 46px;
        top: 16px;
        animation-delay: -0.13888888888888887s;
      }
      > div:nth-child(10) {
        transform: rotate(270deg);
        transform-origin: 50px 20px;
      }
      div:nth-child(11) > div {
        left: 61px;
        top: 20px;
        animation-delay: -0.06944444444444443s;
      }
      > div:nth-child(11) {
        transform: rotate(300deg);
        transform-origin: 65px 24px;
      }
      div:nth-child(12) > div {
        left: 72px;
        top: 31px;
        animation-delay: 0s;
      }
      > div:nth-child(12) {
        transform: rotate(330deg);
        transform-origin: 76px 35px;
      }
    }
  }
}

body.q-disable-loader-scroll {
  overflow: hidden;
}