/* #region loading文字部分 */

/* 
<div class="cssload-container">
  <div class="cssload-l">L</div>
  <div class="cssload-circle"></div>
  <div class="cssload-square"></div>
  <div class="cssload-triangle"></div>
  <div class="cssload-i">I</div>
  <div class="cssload-n">N</div>
  <div class="cssload-g">G</div>
</div>
*/
.cssload-container * {
  color: #000;
  font-size: 34px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
}
.cssload-container {
  position: absolute;
  width: 120px;
  height: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}
.cssload-container > div {
  position: absolute;
  transform-origin: center;
  -o-transform-origin: center;
  -ms-transform-origin: center;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
}
.cssload-l {
  left: 8px;
}
.cssload-i {
  left: 60px;
}
.cssload-n {
  left: 72px;
}
.cssload-g {
  left: 99px;
}
.cssload-square,
.cssload-circle,
.cssload-triangle {
  left: 30px;
}
.cssload-square {
  background: #75b3d1;
  width: 24px;
  height: 24px;
  left: 32px;
  top: 12px;
  transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -o-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -ms-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -webkit-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -moz-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  animation-delay: 2s;
  -o-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
}
.cssload-circle {
  background: #81d47d;
  width: 27px;
  height: 27px;
  top: 10px;
  left: 30px;
  border-radius: 50%;
  animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -o-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -ms-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -webkit-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -moz-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  animation-delay: 0s;
  -o-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
}
.cssload-triangle {
  width: 0;
  height: 0;
  left: 30px;
  top: 11px;
  border-style: solid;
  border-width: 0 14.5px 25.1px 14.5px;
  border-color: transparent transparent #d2798c transparent;
  transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -o-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -ms-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -webkit-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  -moz-animation: cssload-shrinkgrow 3s ease-in-out infinite;
  animation-delay: 1s;
  -o-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
}

@keyframes cssload-shrinkgrow {
  0% {
    transform: scale(0);
  }
  12.5% {
    transform: scale(1);
  }
  25% {
    transform: scale(1);
  }
  33% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@-o-keyframes cssload-shrinkgrow {
  0% {
    -o-transform: scale(0);
  }
  12.5% {
    -o-transform: scale(1);
  }
  25% {
    -o-transform: scale(1);
  }
  33% {
    -o-transform: scale(0);
  }
  100% {
    -o-transform: scale(0);
  }
}

@-ms-keyframes cssload-shrinkgrow {
  0% {
    -ms-transform: scale(0);
  }
  12.5% {
    -ms-transform: scale(1);
  }
  25% {
    -ms-transform: scale(1);
  }
  33% {
    -ms-transform: scale(0);
  }
  100% {
    -ms-transform: scale(0);
  }
}

@-webkit-keyframes cssload-shrinkgrow {
  0% {
    -webkit-transform: scale(0);
  }
  12.5% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1);
  }
  33% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(0);
  }
}

@-moz-keyframes cssload-shrinkgrow {
  0% {
    -moz-transform: scale(0);
  }
  12.5% {
    -moz-transform: scale(1);
  }
  25% {
    -moz-transform: scale(1);
  }
  33% {
    -moz-transform: scale(0);
  }
  100% {
    -moz-transform: scale(0);
  }
}

/* #endregion */

/* #region 圆圈 */

/* 
<div style="height: 100vh;width: 100vw;">
  <div class="loadingio-spinner-double-ring-0i1guu645mf8">
      <div class="ldio-is7auclhvrf">
          <div></div>
          <div></div>
          <div><div></div></div>
          <div><div></div></div>
      </div>
  </div>
</div>
*/

@keyframes ldio-is7auclhvrf {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ldio-is7auclhvrf div {
  box-sizing: border-box !important;
}
.ldio-is7auclhvrf > div {
  position: absolute;
  width: 172.79999999999998px;
  height: 172.79999999999998px;
  top: 33.6px;
  left: 33.6px;
  border-radius: 50%;
  border: 19.2px solid #000;
  border-color: #58acf4 transparent #58acf4 transparent;
  animation: ldio-is7auclhvrf 1.3513513513513513s linear infinite;
}

.ldio-is7auclhvrf > div:nth-child(2),
.ldio-is7auclhvrf > div:nth-child(4) {
  width: 129.6px;
  height: 129.6px;
  top: 55.199999999999996px;
  left: 55.199999999999996px;
  animation: ldio-is7auclhvrf 1.3513513513513513s linear infinite reverse;
}
.ldio-is7auclhvrf > div:nth-child(2) {
  border-color: transparent #f8de3c transparent #f8de3c;
}
.ldio-is7auclhvrf > div:nth-child(3) {
  border-color: transparent;
}
.ldio-is7auclhvrf > div:nth-child(3) div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}
.ldio-is7auclhvrf > div:nth-child(3) div:before,
.ldio-is7auclhvrf > div:nth-child(3) div:after {
  content: '';
  display: block;
  position: absolute;
  width: 19.2px;
  height: 19.2px;
  top: -19.2px;
  left: 57.599999999999994px;
  background: #58acf4;
  border-radius: 50%;
  box-shadow: 0 153.6px 0 0 #58acf4;
}
.ldio-is7auclhvrf > div:nth-child(3) div:after {
  left: -19.2px;
  top: 57.599999999999994px;
  box-shadow: 153.6px 0 0 0 #58acf4;
}

.ldio-is7auclhvrf > div:nth-child(4) {
  border-color: transparent;
}
.ldio-is7auclhvrf > div:nth-child(4) div {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
}
.ldio-is7auclhvrf > div:nth-child(4) div:before,
.ldio-is7auclhvrf > div:nth-child(4) div:after {
  content: '';
  display: block;
  position: absolute;
  width: 19.2px;
  height: 19.2px;
  top: -19.2px;
  left: 36px;
  background: #f8de3c;
  border-radius: 50%;
  box-shadow: 0 110.39999999999999px 0 0 #f8de3c;
}
.ldio-is7auclhvrf > div:nth-child(4) div:after {
  left: -19.2px;
  top: 36px;
  box-shadow: 110.39999999999999px 0 0 0 #f8de3c;
}
.loadingio-spinner-double-ring-0i1guu645mf8 {
  width: 240px;
  height: 240px;
  display: inline-block;
  overflow: hidden;
  background: none;
  margin-left: 50vw;
  margin-top: 50vh;
  transform: translate(-120px, -120px);
}
.ldio-is7auclhvrf {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-is7auclhvrf div {
  box-sizing: content-box;
}
/* generated by https://loading.io/ */

/* #endregion */