Creating Bootstrap based loading buttons with four examples

The loading buttons

The loading buttons can be used for showing users something is happening behind the “scene”. For example, a link is loading behind while you are showing users to wait.

Similarly, a user made an AJAX call and your script is loading the data from a database server that may take some time. In the meanwhile, you can show users that “wait on”, the data for them is loading.

As Bootstrap framework has become popular incredibly, in this tutorial, I am going to show you Bootstrap based loading buttons that you may use for purposes like mentioned above.

In fact, this is quite simple to create – no further dependencies or JS file is required. I assume that you are already working with Bootstrap, so at least CSS reference of the Bootstrap framework is already established.

Creating Bootstrap default buttons as “loading”

You just need to add a reference of font-awesome.min.css, do it in the <head> section.

In the markup section, create the button with btn btn-default classes of the size as you need. Have a look at the live demo:

Bootstrap loading buttons

See online demo and code

In the demo page, you can see the code…

The <head> section contains the references of the CSS files:

<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>

<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>

In the markup section, the buttons are created with default classes and different sizes like btn-sm, btn-lg, btn-block etc. Each button is also assigned an icon from the font-awesome.css file:

 

Use the button size according to the text you want to show to your users.

A demo with primary button style

Same buttons and text as in above examples, except I changed the button style to use primary classes. See the output:

Bootstrap loading buttons primary

See online demo and code

Only the button classes are changed from default to primary, for example:

 

A demo with success classes

See the output with the success class of Bootstrap framework for buttons:

Bootstrap loading buttons success

See online demo and code

With danger classes

And if the wait is critical, you may show the Red buttons so users must not close the app or window:

Bootstrap loading buttons danger

See online demo and code

This time, I used active state of the button as well.