By continuing to browse this site, you are agreeing to our latest Privacy Policy and Term of Use. OK Detail..

Loading Buttons

Bootstrap compatible, pure CSS loading indicator for your button

Download Now CSS Button Generator

CSS Button that loads

Customize and generate your own css buttons that support loading effect.

Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Click Me
Click Me

Customizable Loaders

use loading.css to easily add loaders with your own style

Rotate Ring
ld-ring + ld-spin
Beating Pie
ld-pie + ld-heartbeat
Bouncing Ball
ld-ball + ld-bounce
Bluring Square
ld-square + ld-blur

No JS Required

Loading Buttons contains only CSS. no dependency on JavaScript.


<div class="ld-ext-right"> <div class="ld ld-ball ld-bounce"></div> </div>


<div class="ld-ext-right running"> <div class="ld ld-ball ld-bounce"></div> </div>

Highly Compatible

Works perfectly with frameworks like Bootstrap, Semantic-ui and Foundation, etc.


Extensible Loaders

Genrate your own loader with loading.io builder and use it here

Now Loading...Hover Me
<div class="btn btn-default ld-ext-right running"> <div class="ld ld-loader" style="background-image:url(my-loader.gif);"></div> </div>

Even not Buttons

Any place that needs a loader can use Loading Button. try hovering over this panel to see its effect

sample code ( with bootstrap panel ):

<div class="panel panel-default"><div class="panel-body ld-over"> <div class="ld ld-ring ld-spin"></div> </div></div>


get loading-btn.css and its dependency loading.css from links below:


1. include loading.css and loading-btn.css:

<link rel="stylesheet" type="text/css" href="loading.css"/> <link rel="stylesheet" type="text/css" href="loading-btn.css"/>

2. add modifier to your button. there are 6 modifiers for now, including:


<div class="btn btn-default ld-ext-right"> My Button </div>

3. add loading icon in your button. For example, we add a ld-ring spinner with ld-spin animation:

<div class="btn btn-default ld-ext-right"> My Button <div class="ld ld-ring ld-spin"></div> </div>

4. to trigger it, add running class to button:

<div class="btn btn-default ld-ext-right running"> My Button <div class="ld ld-ring ld-spin"></div> </div>

and here is the result:

My Button ( no running class )
My Button ( with running class )

Customize Loaders

To add your own loaders, use ld-loader class inside button and config it with background-image and font-size attribute:

<div class="btn btn-default ld-ext-top"> My Button <div class="ld ld-loader" style="background-image:url(my-loader.gif)"></div> </div>

here is a sample result:

My Button

Furthermore, config loader size by font-size style:

<div class="btn btn-default ld-ext-right"> My Button <div class="ld ld-ring ld-spin-fast" style="font-size:1.5em"></div> </div>

now we have a large spinner:

My Button

large spinner will overlap with button text, so you may want to adjust font-size of the whole button:

<div class="btn btn-default ld-ext-right" style="font-size:2em"> My Button <div class="ld ld-ring ld-spin-fast"></div> </div>
My Button

Sign Into Loading.io
By clicking {{auth.isSignIn && 'LOGIN' || 'SIGNUP'}}, you agree to our Terms and Privacy Policy.
or login with
Newcomer here? Sign up »Already a member? Sign In »