Buttons with spinners

Posted on October 23th, 2015 at 09:00 PM


We found a beautiful spinner than can be embedded in Bootstrap buttons here. Download the css/js code or link to online repository

There are many ladda options but we liked 'Zoom-in'. This zooms any text embedded in your button and fades in the spinner, reversing the action when stopped. A typical button is shown below:

button id="youraction-button" class="btn btn-primary ladda-button" data-style="zoom-in" onclick="yourAction(); return false;"

The critical elements are addition of the 'ladda-button' class and the 'data-style="zoom-in" options. Once defined the called function needs to start a ladda instance:

var laddaspin;  // global define laddaspin instance
......
function yourAction()
{
  // start action
  laddaspin = Ladda.create( document.querySelector( '#youraction-button' ) );
  laddaspin.start();
  ......
}

Issue a laddaspin.stop() to terminate