.loading-layer { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(68, 68, 68, 0.3); z-index: 10000; }
.loading-layer .loading-wrap { display: table; width: 100%; height: 100%; }
.loading-layer .loading-wrap .loading-text { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #FFF; text-shadow: 2px 3px 2.6px #a2a2a2; font-size: 3.8em; }
.loading-layer .loading-wrap .loading-text > span { font-size: 2em !important; }
.loading-layer.active-loading .loading-wrap .loading-text span { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none}
.loading-layer.active-loading .loading-wrap .loading-text span:nth-child(1) { animation: loading-01 0.82s infinite; }
.loading-layer.active-loading .loading-wrap .loading-text span:nth-child(2) { animation: loading-02 0.82s infinite; }
.loading-layer.active-loading .loading-wrap .loading-text span:nth-child(3) { animation: loading-03 0.82s infinite; }
.loading-layer.active-loading .loading-wrap .loading-text .close-btn { position: absolute; top: 0; right: 0; background: transparent; border: none; font-size: 3rem; }

@keyframes loading-01 {
  25% {
    color: #000;
  }
  50% {
    color: #fff;
  }
}
@keyframes loading-02 {
  50% {
    color: #000;
  }
  75% {
    color: #fff;
  }
}
@keyframes loading-03 {
  75% {
    color: #000;
  }
  100% {
    color: #fff;
  }
}