0

I have the following code where the user clicks on a button and runs an executable in the background. Once the executable is complete it proceeds to a new page. It takes a few seconds to load the new page and I want to display a small animation to the user.

At the moment I am able to change the text of the button from Execute to Loading... once the user clicks on the button.

How can I animate or loop the text from Loading... -> Loading.. -> Loading. until the new page loads? I just want to animate the periods.

Any resources on this is helpful.

$(document).ready(function() {
  $('#loading').on('click', function() {
    $(this).button('loading').delay()
  });
});

<form class="navbar-form navbar-left" method='POST' action='App/Address'>{% csrf_token %}
  <div class="form-group">
    <input type='submit' class="btn-lg btn-danger" value='Execute' name='action' {% if read %} disabled {% endif %} id="loading" data-loading-text="Loading..." autocomplete="off" />
  </div>
</form>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
JC203
  • 384
  • 7
  • 18
  • I've been searching and cannot get it to work. An example is this http://codepen.io/jmalatia/pen/HkmaA where a simple spinner is added to the button, but it looks like Bootstrap 3 does not have it. – JC203 Aug 22 '16 at 13:14

1 Answers1

0

Try this:

// button state
$('#loading')
    .click(function () {
        var btn = $(this)
        btn.button('loading...')
        setTimeout(function () {
            btn.button('reset')
        }, 3000)
    });

I don't know how to toggle in 3 states like you requested ( Loading., loading.. and loading ...) But I hope it helps.

More info here: http://www.tutorialspoint.com/bootstrap/bootstrap_button_plugin.htm

Yuri Pereira
  • 1,945
  • 17
  • 24
  • Thank you for this example. Unfortunately I was not able to get it to work. I try the Ladda UI but it seems it doesn't work with Inputs due to the tag. What I ended up doing was display a spinning button once the user clicked execute. I hid the button with CSS when the page loads, and then displayed it once the button was clicked on. – JC203 Aug 22 '16 at 17:24