Ajax loader with pure CSS3 instead GIF without additional HTML elements

HTML:

    <div id="container" class="innerLoader"></div>

    <button onclick="toogleClass();">Inner Loader</button> 

JavaScript:

    function toogleClass() {
        var container = document.getElementById('container');
        var className = container.className;
        if (className === 'innerLoader')
            container.className = '';
        else 
            container.className = 'innerLoader';
        }
    }

CSS:

 div {
  border:1px orangered solid;
  height: 200px;
 }
 .innerLoader {
  position: relative;
 }

 .innerLoader::after
 {
  content:'';
  position: absolute;

  top:50%;
  left:50%;
  width: 30px;
  height: 30px;
  margin:-15px 0 0 -15px;
  border: 8px solid #000;
  border-right-color: rgba(128, 128, 128, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 20px 2px rgba(128, 128, 128, 0.4), inset 0 0 10px 0px rgba(128, 128, 128, 0.4);
  
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 600ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: innerLoaderKeyframe;
 }
 @-webkit-keyframes innerLoaderKeyframe {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
 }

If you want to use image use next CSS:

 .innerLoader::after
 {
  content:'';
  position: absolute;
  
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  background-image: url(ajax_loader.png);
  background-repeat: no-repeat;
  background-position: center;
  /*background-size: 13px 13px; // retina display*/
  
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 600ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: innerLoaderKeyframe;
 }