Recreate Button Loading Animation

Ask us anything How do I?
1

In the UI Starter Kit, there are some button components. The loading state has a left icon of a circle with a notch that rotates perpetually. I’m not sure what properties are making that happen to recreate it on my own buttons. The animation properties are default.

How can I achieve this?

1 Like
2

If I understand correctly, you want to activate a loader animation on your button directly?

3

Yes, but the WeWeb StarterKit UI has built that using an icon, and not the loader component.

Please see the attached screenshot of the StarterKit button component and it’s associated “Loading” state panel info.

Screenshot 2024-01-26 at 5.00.53 PM
Screenshot 2024-01-26 at 5.00.53 PM614×2668 97.6 KB

Screenshot 2024-01-26 at 4.59.49 PM

4

For now I think your only options are to either:

  1. Get it from the Starter kit
  2. Do your own animation with CSS, as it seems like this is a feature that is not yet out. But I might be wrong. I don’t think that you can loop animations for now.

The animations update should be coming soon though, allowing to do this in no-code as well.

1 Like
5

That’s what it seemed to me as well. I’m just going to reformat the WeWeb kit and use that for now.

6

I like to create a flexbox that has a loader and button inside of it. then i give the loader an absolute positioning and position it wherever I want in the button. then I create a variable that is true when the loading state is active and false otherwise. finally I bind the visibility of the loader to that variable.

7

You can bind a loader state to a button, and use UI animation on the icon of the button.