loading image using css animation VS loading using gif image

I encounter a problem showing loading css animation while doing heavy js operation, so I wonder if css animation is taking more resources then showing 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. compare their resources using chrome task manager

here are the results look 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

style

            /* 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 simple gif

style

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