Loading image using CSS animation VS loading using GIF image - html

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
Created page with loading CSS animation
Created page with loading GIF image
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