I want to create a loader with still image in between the loader circle : <blockquote>
  <p>I want to create a loader with still image in between the loader
  circle.  in this code the image is rotating along with loader i want 
  the image to be still not rotating.</p>
</blockquote>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h2&gt;Loader with image&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; The -webkit- and -ms- prefixes are for browsers that do not support animation and transform properties.&lt;/p&gt;

&lt;div class="loader"&gt;
	 &lt;img id="drawerUserImage" class="img-circle" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/view-128.png"/&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>
