Loading Wrapper

by Galo Aragoneses

HTML

<div class="main">
    <div class="halfColumn" >
        <div class="loading-wrapper" >
            <div class="loading-overlay">
                <span>Loading...</span>
            </div>
        </div>
    </div>
</div>

CSS

.halfColumn {
    width: 400px;
}
.loading-wrapper {
    position: relative;
    border-style:solid;
    border-width: 1px;
    border-color: red;
    height: 100%;
}

.loading-overlay {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.3);
    /*dim the background*/
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:black;
    text-align: center;
}

.loading-overlay span {
  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)
  }
}