/*
@author: http://coderexample.com
@reference : http://codepen.io/Akiletour/pen/emGOgd
*/
.dataTables_wrapper .dataTables_processing{
	position: absolute!important;
	top: 50%!important;
	right: 0!important;
	bottom: 0!important;
	margin-left: 50%!important;
	margin-top: 15px!important;
	background:none;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
}

.dataTables_processing > div {
 content: "";
  width: 10px;
  height: 10px;
  background: #2196F3;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: animate 2s linear infinite;
          animation: animate 2s linear infinite;
}
.dataTables_processing > div:nth-of-type(1) {
  -webkit-animation-delay: -.4s;
          animation-delay: -.4s;
}
.dataTables_processing > div:nth-of-type(2) {
  -webkit-animation-delay: -.8s;
          animation-delay: -.8s;
}
.dataTables_processing > div:nth-of-type(3) {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.dataTables_processing > div:nth-of-type(4) {
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}

@-webkit-keyframes animate {
  0% {
    left: 100px;
    top: 0;
  }
  80% {
    left: 0;
    top: 0;
  }
  85% {
    left: 0;
    top: -10px;
    width: 10px;
    height: 10px;
  }
  90% {
    width: 40px;
    height: 15px;
  }
  95% {
    left: 100px;
    top: -10px;
    width: 10px;
    height: 10px;
  }
  100% {
    left: 100px;
    top: 0;
  }
}

@keyframes animate {
  0% {
    left: 100px;
    top: 0;
  }
  80% {
    left: 0;
    top: 0;
  }
  85% {
    left: 0;
    top: -10px;
    width: 10px;
    height: 10px;
  }
  90% {
    width: 20px;
    height: 10px;
  }
  95% {
    left: 100px;
    top: -10px;
    width: 10px;
    height: 10px;
  }
  100% {
    left: 100px;
    top: 0;
  }
}