Hello all, 

I needed to animate an image that would be used as a loading icon. It has like 3 frames. How would I do it in an Outsystems screen?

Best,


Vin

Hi Vinicius,

What kind of animation you want to do? If you want to use CSS check here how to do it. Outsystems UI Web also have an animate component for simple enter and leave animations, you can check it here how to use it.

Regards,

Marcelo

Hi Vinicius,

Is your image complex, or is it a set of simple shapes? Do you have the frames, or just a general description of how the animation should progress?

If it's a set of shapes, you could get all of it done in CSS, by recreating the actual image in a class. Here's a set of examples I like to use when I build loaders.

You could also create a GIF out of your frames if support is a concern. Animation and transition, two of the CSS properties that would be needed should work in everything after IE8, but the implementation of the animation is up to the browser.

Vinicius Seixas wrote:

Hello all, 

I needed to animate an image that would be used as a loading icon. It has like 3 frames. How would I do it in an Outsystems screen?

Best,


Vin


In this case we have found that it is easiest to use a simple GIF under an if statement.


I have attached a sample espace as an example.


Alternatively, if you are still using silk you can use the Button Load class on your link to show a little bit of action on the button the user clicks. (This feature, perplexingly, is missing from Outsystems UI.)