CSS Loading

CSS Loading Spinner

by Galo Aragoneses

HTML

<div style="position: relative">
  <div class="loading-screen">
      <span class="spinner"></span>
  </div>
</div>

CSS

.loading-screen {
  background-color: rgba(255,0,0,0.8);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999999999;
  background-color: rgba(255,255,255,.4);
  opacity: .8;
  width: 100%;
  height: 100%;
}
  
.loading-screen .spinner {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  font-size: 10px;
  text-indent: -9999em;
  border-top: .5em solid rgba(72,12,85,0.8);
  border-right: .5em solid rgba(72,12,85,0.8);
  border-bottom: .5em solid rgba(72,12,85,0.8);
  border-left: .5em solid rgba(72,12,85,0.18);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
	
@-webkit-keyframes load8 {
  0% {
	  -webkit-transform: rotate(0);
	  transform: rotate(0)
  }
 
  100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg)
  }
}
 
@keyframes load8 {
  0% {
	  -webkit-transform: rotate(0);
	  transform: rotate(0)
  }
 
  100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg)
  }
}