@keyframes ldboxrotate {
  to {
		transform: rotate(1turn);
	}
}

#app-loading {
  font-family: Helvetica, Arial, sans-serif;
  z-index: 10001;
  background-color: #00bcd4;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  width: 100%;
  height: 100%;
}

.loader {
  left: 50%;
  top: 50%;
  margin-top: -100px; // put further to top than center
  margin-left: -30px;
  position: absolute;
  border: 3px solid transparent;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  border-radius: 60px;
  animation-fill-mode: both;
  animation-name: ldboxrotate;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: paused;
  animation-duration: 0.8s;
  height: 60px;
  width: 60px;
}

.loader.running {
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.loader:after {
  content: '';
  position: absolute;
  width: 30px;
  height: 33px;
  top: 30px;
  left: 15px;
  background-color: #00bcd4;
}
