Button with preloader spinner or infinite progress bar

1

Is it possible to add a preloader spinner or infinite progress bar to a button after clicking, to inform the user that some action being performed? I’ve tried to tweak the new preloader.showIn(...) to add a spinner to a button or a infinite progress bar to the bottom of a button, but that seems to require a lot of CSS modifications.

What I really would like is combining a button with a infinite progress bar to indicate that it’s click is being processed, something like this:

<a href="#" class="button button-fill" @click="runAction">
  Click here
</a>

And then something like this in the runAction method:

runAction(e) {
  $$( e.target )
    .addClass('disabled progressbar-infinite')
    .text('Please wait');
}

Maybe it’s possible already, otherwise it might be worth a feature request to combine .button with .preloader or .progressbar

2

Specially for you :wink: https://www.patreon.com/posts/nice-loading-in-31252104

2 Likes
3
4

Great @nolimits4web! Completely missed that post on Patreon :upside_down_face: Gonna try it tomorrow :+1: