Loading image using CSS animation VS loading using GIF image

Question

I encounter a problem showing loading a CSS animation 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.

1 created page with loading CSS

1. Created page with loading CSS animation
2. Created page with loading GIF image
3. Compared their resources using Chrome task manager

Here are the results:

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?

Loading example using CSS animation

Loading example using GIF image

Here is the code for loading with CSS animation

CSS

/* 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;
}

HTML

<div id="loadingWrap">
   <div id="loadingIcon">
      <i class="glyphicon glyphicon glyphicon-cog spin">Q</i>
   </div>
</div>

Here is the code for loading using a simple GIF image

CSS

#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;
 }

HTML

<div id="loadingWrap">
   <div id="loadingIcon">
   </div>
</div>

Answer 1

Gif images:

• Positives

  • Performance (small file size)
  • Ease of use & setup
  • Older browser support

• Negatives:

  • Don't scale smoothly (retina displays, larger images)
  • Image quality(256 color limit)
  • Difficult adaptation & change (need specialized software like Photoshop)

Css animations:

• Positives:

  • Easily editable through CSS
  • High quality images and rich colors possible
  • Smooth scaling (retina ready images & svgs)

• Negatives:

  • Performance
  • CSS animations not supported by IE 7,8,9
  • More complex to setup