@logicflow/dumi-theme-simple/dist/slots/Loading/index.module.less

Simple website theme based on dumi2.

.loading {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border: 1px solid #f0f0f0;

  :global {
    .container {
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -50px 0 0 -120px;
    }

    .loader {
      --duration: 3s;
      width: 44px;
      height: 44px;
      position: relative;
      display: inline-block;
      margin: 0 16px;
    }

    .loader:before {
      content: ' ';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      position: absolute;
      display: block;
      background: #ff700a;
      top: 37px;
      left: 19px;
      -webkit-transform: translate(-18px, -18px);
      transform: translate(-18px, -18px);
      -webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    .loader svg rect,
    .loader svg polygon,
    .loader svg circle {
      fill: none;
      stroke-width: 10px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    .loader svg polygon {
      stroke-dasharray: 145 76 145 76;
      stroke-dashoffset: 0;
      -webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader svg rect {
      stroke-dasharray: 192 64 192 64;
      stroke-dashoffset: 0;
      -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader svg circle {
      stroke-dasharray: 150 50 150 50;
      stroke-dashoffset: 75;
      -webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loader.triangle {
      width: 48px;
    }

    .loader.triangle:before {
      left: 21px;
      -webkit-transform: translate(-10px, -18px);
      transform: translate(-10px, -18px);
      -webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
      animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
    }

    .loading-text {
      text-align: center;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      letter-spacing: 0.1em;
      color: #666;
    }
  }
}

@-webkit-keyframes ~ ":global(pathTriangle)" {
  33% {
    stroke-dashoffset: 74;
  }

  66% {
    stroke-dashoffset: 147;
  }

  100% {
    stroke-dashoffset: 221;
  }
}

@keyframes ~ ":global(pathTriangle)" {
  33% {
    stroke-dashoffset: 74;
  }

  66% {
    stroke-dashoffset: 147;
  }

  100% {
    stroke-dashoffset: 221;
  }
}

@-webkit-keyframes ~ ":global(dotTriangle)" {
  33% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  66% {
    -webkit-transform: translate(10px, -18px);
    transform: translate(10px, -18px);
  }

  100% {
    -webkit-transform: translate(-10px, -18px);
    transform: translate(-10px, -18px);
  }
}

@keyframes ~ ":global(dotTriangle)" {
  33% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  66% {
    -webkit-transform: translate(10px, -18px);
    transform: translate(10px, -18px);
  }

  100% {
    -webkit-transform: translate(-10px, -18px);
    transform: translate(-10px, -18px);
  }
}

@-webkit-keyframes ~ ":global(pathRect)" {
  25% {
    stroke-dashoffset: 64;
  }

  50% {
    stroke-dashoffset: 128;
  }

  75% {
    stroke-dashoffset: 192;
  }

  100% {
    stroke-dashoffset: 256;
  }
}

@keyframes ~ ":global(pathRect)" {
  25% {
    stroke-dashoffset: 64;
  }

  50% {
    stroke-dashoffset: 128;
  }

  75% {
    stroke-dashoffset: 192;
  }

  100% {
    stroke-dashoffset: 256;
  }
}

@-webkit-keyframes ~ ":global(dotRect)" {
  25% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    -webkit-transform: translate(18px, -18px);
    transform: translate(18px, -18px);
  }

  75% {
    -webkit-transform: translate(0, -36px);
    transform: translate(0, -36px);
  }

  100% {
    -webkit-transform: translate(-18px, -18px);
    transform: translate(-18px, -18px);
  }
}

@keyframes ~ ":global(dotRect)" {
  25% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }

  50% {
    -webkit-transform: translate(18px, -18px);
    transform: translate(18px, -18px);
  }

  75% {
    -webkit-transform: translate(0, -36px);
    transform: translate(0, -36px);
  }

  100% {
    -webkit-transform: translate(-18px, -18px);
    transform: translate(-18px, -18px);
  }
}

@-webkit-keyframes ~ ":global(pathCircle)" {
  25% {
    stroke-dashoffset: 125;
  }

  50% {
    stroke-dashoffset: 175;
  }

  75% {
    stroke-dashoffset: 225;
  }

  100% {
    stroke-dashoffset: 275;
  }
}

@keyframes ~ ":global(pathCircle)" {
  25% {
    stroke-dashoffset: 125;
  }

  50% {
    stroke-dashoffset: 175;
  }

  75% {
    stroke-dashoffset: 225;
  }

  100% {
    stroke-dashoffset: 275;
  }
}