Loading image using CSS animation VS loading using GIF image

Question

I ran the following tests to see if CSS animation used more resources than displaying a basic loading GIF image because I had trouble with it when doing a demanding JavaScript operation.

1 newly built page with CSS loading

created page using CSS animation for loading

created a page with a GIF image loading

Using the task manager in Chrome, they were compared.

These are the outcomes:

I want to speak with someone about using CSS animations because it appears that they use more CPU and memory. Is that not a bit heavy? Is it anything I shouldn't use in loading cases?