title: Loading image using CSS animation VS loading using GIF image
body: <p>I encounter a problem showing loading a CSS <strong>animation</strong> while doing a heavy JavaScript operation, so wondering if CSS animation is taking more resources than showing a simple loading GIF image, I made the following tests.</p>
  
  <p>1 created page with loading CSS</p>
  
  <ol>
  <li>Created page with loading CSS animation</li>
  <li>Created page with loading GIF image</li>
  <li>Compared their resources using Chrome task manager</li>
  </ol>
  
  <p>Here are the results:</p>
  
  <p>It looks like CSS animation is using more CPU, and more memory
  so basically I want to consult about using CSS animations. Isn't that too heavy? Should I avoid using it in loading cases?</p>
  
  <p><a href="https://jsfiddle.net/eyhobnvr/5/" rel="noreferrer">Loading example using CSS animation</a></p>
  
  <p><a href="https://jsfiddle.net/eyhobnvr/3/" rel="noreferrer">Loading example using GIF image</a></p>
  
  <p><img src="https://i.stack.imgur.com/QCi3n.png" alt="CSS loading animation compare to GIF loading image"></p>
  
  <p><strong>Here is the code for loading with CSS animation</strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* Beautiful loading screen */
  #loadingWrap{
    width: 100%;
    height: 100%;
    top: 0px;
    z-index: 250;
    background-color: rgba(255, 255, 255, 0.46);
  }
  .glyphicon.spin {
    font-size: 36px;
    -webkit-animation: spin 1.822s infinite linear;
    -moz-animation: spin 1.822s infinite linear;
    -o-animation: spin 1.822s infinite linear;
    animation: spin 1.822s infinite linear;
    -webkit-transform-origin: 50% 58%;
    transform-origin:50% 58%;
    -ms-transform-origin:50% 58%; /* IE 9 */
    line-height: 0px;
  }
  
  @-moz-keyframes spin {
    from {    -moz-transform: rotate(0deg);  }
    to {    -moz-transform: rotate(360deg);  }
  }
  
  @-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
  }
  @keyframes spin {
    from { transform: rotate(0deg); }
    to {transform: rotate(360deg); }
  }
  #loadingIcon {
    z-index: 10;
    position: absolute;
    right: 20px;
    bottom: 20px;
    line-height: 0px;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="loadingWrap"&gt;
     &lt;div id="loadingIcon"&gt;
        &lt;i class="glyphicon glyphicon glyphicon-cog spin"&gt;Q&lt;/i&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is the code for loading using a simple GIF image</strong></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#loadingWrap{
        width: 100%;
        height: 100%;
        top: 0px;
        z-index: 250;
        background-color: rgba(255, 255, 255, 0.46);
   }
   #loadingIcon {
        z-index: 10;
        position: absolute;
        right: 20px;
        bottom: 20px;
        line-height: 0px;
        background: url(../1-0.gif) no-repeat center center;
        width: 20px;
        height: 20px;
   }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="loadingWrap"&gt;
     &lt;div id="loadingIcon"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>