Advice generator with animated loader

Hi,

This is my solution to Advice generator app. I have added some cool animations to make it look better. Dice icon inside the button rotates while the advice is being loaded.

The most difficult part for me was to time the animation properly. When the advice is loaded, the icon should complete its rotation before stopping. I did this using animation-play-state along with following JS:

  myElement.addEventListener('animationiteration', (e) => {
    // Stop animation by removing class or data attributes
  }, {
    once: true
  });

If you have any suggestion or improvement idea, I would love to know!

Thanks for checking out :)