Add Support for Animated Icons (e.g., Infinite Loop, Pulsing, etc.)

[lopatin96]

Hi FluxUI team,

I’d like to propose a feature for animated icons It would be great to have icons that can animate in various ways, such as:

• Infinity loop animation (where the icon spins continuously).
• Pulsing animation (to draw attention to the element).
• Other customizable animations (like fade, bounce, etc.).

These animations could be useful for enhancing the user interface and making it more dynamic and engaging. It would be awesome if we could easily configure the animations using simple properties or parameters.

Currently, the "In Progress" status icon in my table appears static, and it would be really cool to have the option to make this icon spin (e.g., in an infinite loop) while the task is in progress. This would add a nice dynamic touch to the UI and improve the user experience.

Thanks for considering this feature!

[clinically-au]

You can this using CSS selectors. In app.css, add something like:

div.icon-animate-spin svg {
  @apply animate-spin;
}

Then add the icon-animate-spin class to any badge:

<flux:badge icon:trailing="arrow-path" class="icon-animate-spin" color="blue">In Progress</flux:badge>

[lopatin96]

@clinically-au thank you very much. It works!