html, body {
            height: 100%;
            margin: 0;
        }

        .loading {
            position: absolute;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
                text-align: center;
             
        }

            .loading .mask {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #444;
                opacity: 0.5;
            }
            .loading .loadingio-spinner-spinner {
                /*border: 1px solid red;*/

                position: relative;
                top: 50%;
                margin: 0 auto;
                +transform(translateY(-50%));
            }


/*  https://loading.io/asset/445230  spinner 產生器 */

@keyframes ldio {
  0% { opacity: 1 }
  100% { opacity: 0 }
}
.ldio div {
  left: 107.415px;
  top: 68.145px;
  position: absolute;
  animation: ldio linear 1.2048192771084336s infinite;
  background: #356acd;
  width: 16.17px;
  height: 16.17px;
  border-radius: 8.085px / 8.085px;
  transform-origin: 8.085px 47.355000000000004px;
}.ldio div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.07095046854083s;
  background: #356acd;
}.ldio div:nth-child(2) {
  transform: rotate(40deg);
  animation-delay: -0.9370816599732261s;
  background: #356acd;
}.ldio div:nth-child(3) {
  transform: rotate(80deg);
  animation-delay: -0.8032128514056224s;
  background: #356acd;
}.ldio div:nth-child(4) {
  transform: rotate(120deg);
  animation-delay: -0.6693440428380187s;
  background: #356acd;
}.ldio div:nth-child(5) {
  transform: rotate(160deg);
  animation-delay: -0.535475234270415s;
  background: #356acd;
}.ldio div:nth-child(6) {
  transform: rotate(200deg);
  animation-delay: -0.4016064257028112s;
  background: #356acd;
}.ldio div:nth-child(7) {
  transform: rotate(240deg);
  animation-delay: -0.2677376171352075s;
  background: #356acd;
}.ldio div:nth-child(8) {
  transform: rotate(280deg);
  animation-delay: -0.13386880856760375s;
  background: #356acd;
}.ldio div:nth-child(9) {
  transform: rotate(320deg);
  animation-delay: 0s;
  background: #356acd;
}
.loadingio-spinner-spinner {
  width: 231px;
  height: 231px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio div { box-sizing: content-box; }