1

I am working on a loading component and using this codepen as a reference

Check out here --> Code

The CPU usage hikes up as soon as I test this out. I tried to add these, as suggested on other posts but the animation stops, 

transform: translateZ(0) or will-change: transform

Any suggestions

Apple Pie
  • 93
  • 3
  • 13
  • Did you add the `will-change` to the correct element? Also, have you tried adding `opacity` to the `will-change`? You can do `will-change: transform, opacity;`. Mostly because of the gradient and the element being rotated. Not sure if this will make a difference though. – Leite Jun 14 '18 at 16:35
  • it didn't help. – Apple Pie Jun 15 '18 at 13:57
  • This is one of those tricky ones. Sorry, don't have other ideas :\ – Leite Jun 15 '18 at 14:52

1 Answers1

0

You can use .gif image file instead of creating new one like you are trying.

I don't know where you gonna use that feature.

But Ajax has an attribute called 'beforeSend'.

ref: Jquery Ajax beforeSend and success,error & complete

And also, if you want to implement it while a page is being loading. Then, you can implement it like below.

ref: Can I run javascript before the whole page is loaded?

I hope this is helpful.

c-an
  • 3,543
  • 5
  • 35
  • 82