Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »
{{n.message}}

Loading Buttons

Empower your website with pure CSS buttons that load


Download Now CSS Button Generator

CSS Button that loads

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


Hover Me
ld-ext-top
Hover Me
ld-ext-bottom
Hover Me
ld-ext-left
Hover Me
ld-ext-right
Hover Me
ld-over
Hover Me
ld-over-inverse
Click Me
ld-over-full
Click Me
ld-over-full-inverse


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.

normal

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

loading

<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.

Bootstrap


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>



Download

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


Usage

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:

example:

<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