html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: rgba(0,0,0,0.9);
}
.loader,
.loader span,
.spinner {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
}
.loader span {
  line-height: 200px;
  padding-left: 60px;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 1px;
  color: rgba(255,255,255,0);
  text-shadow: 0 0 0 rgba(255,255,255,0.75), 0 0 2px #1e90ff, 0 0 4px #1e90ff, 0 0 6px #1e90ff, 0 0 8px #1e90ff, 0 0 10px #1e90ff;
}
.spinner {
  border-radius: 50%;
  box-shadow: 3px 0 1px -1px #fff, 5px 0 5px rgba(30,144,255,0.5), inset -10px 0 10px -5px rgba(30,144,255,0.5);
  -webkit-animation: loading 1s linear infinite;
          animation: loading 1s linear infinite;
}
.spinner:before {
  position: absolute;
  width: 160px;
  height: 160px;
  margin: 10% 0 0 10%;
  border-radius: 50%;
  content: " ";
  box-shadow: 2px 0 1px -1px #fff, 10px 0 5px -5px rgba(30,144,255,0.5), inset -3px 0 3px rgba(30,144,255,0.5);
}
@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}