#loadings {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 150px;
  margin: auto;
}
#loadings .loader {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 50px;
  height: 50px;
  border: 15px solid;
  border-radius: 50%;
  border-top-color: rgba(44, 44, 44, 0);
  border-right-color: rgba(55, 55, 55, 0);
  border-bottom-color: rgba(66, 66, 66, 0);
  border-left-color: rgba(33, 33, 33, 0);
  animation: loadEr 3s infinite;
}

@keyframes loadEr {
  0% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0);
  }
  10.4% {
    border-top-color: rgba(44, 44, 44, 0.5);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0);
  }
  20.8% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0);
  }
  31.2% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0.5);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0);
  }
  41.6% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0);
    transform: rotate(40deg);
  }
  52% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0.5);
    border-left-color: rgba(33, 33, 33, 0);
  }
  62.4% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0);
  }
  72.8% {
    border-top-color: rgba(44, 44, 44, 0);
    border-right-color: rgba(55, 55, 55, 0);
    border-bottom-color: rgba(66, 66, 66, 0);
    border-left-color: rgba(33, 33, 33, 0.5);
  }
}
#loadings .loaderbefore {
  width: 50px;
  height: 50px;
  border: 15px solid #88a0cc;
  border-radius: 50%;
  position: absolute;
  top: 0;
  z-index: 9;
}
#loadings .circular {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 70px;
  height: 70px;
  border: 20px solid;
  border-radius: 50%;
  border-top-color: #b12626;
  border-left-color: #fff;
  border-bottom-color: #213e9a;
  border-right-color: #fff;
  opacity: 0.2;
  animation: poof 5s infinite;
}
@keyframes poof {
  0% {
    transform: scale(1, 1) rotate(0deg);
    opacity: 0.2;
  }
  50% {
    transform: scale(4, 4) rotate(360deg);
    opacity: 0;
  }
}
#loadings .another {
  opacity: 0.1;
  transform: rotate(90deg);
  animation: poofity 5s infinite;
  animation-delay: 1s;
}
@keyframes poofity {
  0% {
    transform: scale(1, 1) rotate(90deg);
    opacity: 0.1;
  }
  50% {
    transform: scale(4, 4) rotate(-360deg);
    opacity: 0;
  }
}

#loadings .text {
  position: absolute;
  top: 95px;
  left: 8px;
	font-family:-apple-system, BlinkMacSystemFont,Roboto, San Francisco, Helvetica Neue, Helvetica, Arial, PingFangSC-Light, Hiragina Sans GB, WenQuanYi Micro Hei, microsoft yahei ui, microsoft yahei, sans-serif;
  text-transform: uppercase;
  color: #7a8cb7;
  animation: opaa 10s infinite;
}
@keyframes opaa {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.5;
  }
  15% {
    opacity: 1;
  }
  30% {
    opacity: 1;
  }
  65% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.8;
  }
}