How to create a loading spinner within a button element that I can show/hide

[avidflow]

Hi,

How can I set up a loading spinner within a button such that I can control the loading spinner from the conditional visibility?

When I insert a loading spinner into my button, it doesn’t render on the canvas in the editor.

For conditional visibility, I’ve set the loading spinner to “On” thinking I would see it, but it never appears on the canvas (even when I Force it to show on the canvas).

Has anyone set up a loading spinner in a button? What approach have did you use?

Alternatively, I tried creating a component button out of a div so I can have better control to the elements (icons, loading spinner) within this div (acting as a button), but the problem with this is when I use such a button in a form, I can’t use the on Submit event because I’m notified that there isn’t a “Submit button” when when I use my custom button component (made out of a div). Even if I try giving it the attribute type = submit. So I’ve abandoned trying to set up a custom button and trying to see if I could get the default button element to show a spinner somehow.

Any help would be much appreciated.

Thank you,
Sean

[Agustin_Carozo]

Hi Sean

That’s interesting, I’m not even sure how you managed to put a spinner inside a button, I tried replicating your project so I could help you and couldn’t do it.

So I think loaders are not supposed to be inside actual buttons.

An approach you could try is to have 2 buttons, one “submit” one for the form validation and another that has the spinner inside and replicates the same design.

When you enter a loading state you could hide your form button and show your custom spinner one and vice versa.

Let me know if that made sense.

[avidflow]

Thanks @Agustin_Carozo that makes sense. About the spinner in the button, I think pushed AI too hard . I believe it replaced my Left icon with a Loading spinner element but then treated it as a Left icon so I could only set it to On/Off (on a side note, it would be nice if those On/Off for left & right icons also allowed bindings).

Regarding your suggestion. Yes, that makes sense and I had that on my mind but seemed to cumbersome. I guess I’ll have to go with that.

Would be great if there was an option to add the loading spinner to a regular button element and be able to bind that in a future update.

Thanks a ton. I really appreciate it.

Sean

[archenia_jsanchez]

@Agustin_Carozo

When you enter a loading state you could hide your form button and show your custom spinner one and vice versa.

I’ve managed to do this. I’ll try and explain how I did it:

• I’ve created a component that wraps around the native WeWeb button element, the one that has 2 icons nested inside it.
  

  

• At the button level, I have the left icon turned off always and the right icon turned on. I have a component property to control the button’s icon, which will always appear to the right of the text.
  

  
  
  
  

• I then have a state called “loading” which is controlled by the component variable and/or the manual property called “force loading state” which is useful for testing. If the button is in “loading” state then I hide the text and switch the icon to the loading icon and apply animation to it.
  

  
  
  
  
  
  
  

Putting this all together, I have a component level workflow that can be executed from outside. So when you tap a button, I trigger this workflow, which switches the button to the loading state, and then run whatever logic I need to, finally ending the workflow with switching back from the loading state. It’s worked pretty well for the most part. The main challenge is that by hiding text causes issues with width:auto so either I accept the button will resize or I set it to a static/stretch width (which is fine for many instances).

[avidflow]

Thank you so much for the detailed explanation. Really appreciate it. I’ll try this and let you know in case I have any issues. Thanks so much once again.

[Agustin_Carozo]

What an amazing explanation John, I appreciate it a lot, this can become a reference for others trying to achieve the same

[attlas]

Hi, another way is to add an HTML ::before element:

1. Add a class to the button, as HTML attribute (ex: loader)

2. Add a custom CSS (HTML element) to the page/project

.loader::before { content: ""; display: inline-block; width: 12px; aspect-ratio: 1; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.6s linear infinite; vertical-align: middle; margin-right: 8px; box-sizing: border-box; transform-origin: center; } @keyframes spin { to { transform: rotate(1turn); } }

3. Bind the the class “loader” depending on a variable

4. You can trigger the loader as you want

[Batik_Okazov]

hi,

can you show an example with screenshots please?

I tried to implement, but Weweb editor constantly changes the code in the custom CSS.

The code I paste:

.loader::before {
content: “”;
display: inline-block;
width: 12px;
aspect-ratio: 1;
border-radius: 50%;
border: 2px solid currentColor;
border-right-color: transparent;
animation: spin 0.6s linear infinite;
vertical-align: middle;
margin-right: 8px;
box-sizing: border-box;
transform-origin: center;
}

@keyframes spin {
to {
transform: rotate(1turn);
}
}

The code I get after initiating

.loader: :before {;

content: “”;

display: inline-block;

width: 12px;

aspect-ratio: 1;

border-radius: 50%;

border: 2px solid currentColor;

border-right-color: transparent;

animation: spin 0.6s linear infinite;

vertical-align: middle;

margin-right: 8px;

box-sizing: border-box;

transform-origin: center;

transform: rotate(1turn);

[attlas]

The HTML with ‘style’ tags

Formula

Result

[Batik_Okazov]

thank you very much.

I literally did the same setup except for one thing - the quotes!

Somehow during copypasting they changed to typographic ones (content: “”;). And, obviously, nothing worked.