Amal's - loading gif

Show loading gif while getting data from backend

by Amal Das

HTML

<div class="grid-block loading card z-div">
  
</div>

CSS

.grid-block{
  position:relative;
  width: 200px;
  height:200px;
  background-color:green;
}
.grid-block.loading:after {
  content: ' ';
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif')  center no-repeat ;
  background-size : auto 100%;
  width: 106px;
  height: 106px;
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display: block;
}