Improve SVG / CSS Counter Performance

Question

I am replacing the old Ember.js application spinner gif with a new SVG / CSS counter.

This is a spinner, my project is saved as .svg :

http://codepen.io/FezVrasta/pen/pJXovM

And I load it using this CSS:

 background: no-repeat center; background-image: url(../images/spinner.svg); background-size: 65px 65px; 

The problem is that my Ember.js application does a lot of calculations while the counter is being displayed, and this leads to a counter delay.

I tried to encode svg in base64 using b64.io, but the only gain is boot time, the performance is the same.

As you can see, I already tried using the GPU using rotate3d instead of rotate , but I did not get any performance improvement.

Any tips to improve its fluidity? Good practice, tricks, etc. Welcome.

Answer 1

The problem here almost certainly lies in the Ember.js application, and not on the spinner.

Try some profiling tools to find out what causes Ember to lag. I am sure there are steps you can take to improve the performance of your application!