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

Ring
ld-ring + ld-spin
Beating Pie
ld-pie + ld-rubber-h
Shaking Ball
ld-ball + ld-flip-h

No JS Required

Loading Buttons contains only CSS. No dependency on JavaScript.

normal


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

loading


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

Highly Compatible

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

Bootstrap

Extensible Loaders

Generate your own loader with loading.io and use it here.

Now Loading...Hover Me

Even not Buttons

Any place that needs a loader can use Loading Button.

hover this panel to see the effect

sample code with bootstrap 4 card component as below.

Download

Install via npm:

npm install --save ldbutton

or, get index.css in its Github repo / directly from this link, or via CDN:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/loadingio/ldbutton@latest/dist/index.min.css" />

Usage

1. include index.css:

<link rel="stylesheet" type="text/css" href='path/to/your/index.min.css' />

NOTE: you will need loading.css for using loaders shown in previous examples.

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

  • ld-ext-top
  • ld-ext-left
  • ld-ext-right
  • ld-ext-bottom
  • ld-over
  • ld-over-inverse
  • ld-over-full
  • ld-over-full-inverse

example:

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

3. add an element containing the loading icon in your button. This element must contain a css class named ld. For example, following example adds a simple square:

<div class="btn btn-primary ld-ext-right"> My Button <div class="ld" style="width:1em;height:1em;background:currentColor;"></div> </div>

4. trigger it by adding running class to button:

<div class="btn btn-primary ld-ext-right running"> My Button <div class="ld" style="width:1em;height:1em;background:currentColor;"></div> </div>

.. which will be like this:

running not set
My Button
running set
My Button

By using loading.css you can add spinner animation easily. For example, following example adds a ld-ring spinner with ld-spin animation:

<!-- include loading.css to use ld-ring and ld-spin --> <link rel="stylesheet" type="text/css" href="path/to/your/loading.css"/> <div class="btn btn-primary ld-ext-right"> My Button <div class="ld ld-ring ld-spin"></div> </div>

here is the result:

running not set
My Button
running set
My Button

For more information about how to use loading.css, please read the online documentation of loading.css.

Customize Loaders

You can use any animations for the loader element to customize your own loader animation, if you keep the size of loader element 1em in both width and height. Following example use a rotating disk GIF:

<div class="btn btn-primary ld-ext-top running"> <img src="path/to/your/gif" class="ld" > My Button </div>
diskMy Button

If you want to adjust the size of your loader, you have to put your loader inside ld element, and use font-size style to change it size:

<div class="btn btn-primary ld-ext-top running"> <div class="ld"> <img src="path/to/your/gif" style="font-size:2em" /> </div> My Button </div>
disk
My Button

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

<div class="btn btn-primary ld-ext-top running"> <div class="ld"> <div class="ld-loader" style="background:url(your.gif);font-size:2em" ></div> </div> My Button </div>
My Button

Change spinner size might make it overlap with button text, so you probably will want to adjust font-size of the whole button.

Update Loader Status

Loading Buttons is a CSS library which only provides styling for loaders between different status. To toggle loader on or off, you need a little extra JavaScript to drive the dynamics.

Following is an example of toggling running state on and off by simply clicking the button:

Click Me

However, real life is usually more complicated than above example. We need to keep track of the DOM, state, and even to track how many times a loader is toggled.

ldLoader / JS Loader State Handling Lib

Loading.io provides another handy JS library ldLoader that helps you manipulate and track your loaders' status. A simple example to control loader by ldLoader is as below:

Click Me

with ldLoader you only have to deal with the created ldLoader instance. The ldLoader instance keeps track of the loader's DOM, state, loader grouping and even z-index for you.

To learn more about how to use ldLoader, you can find documentation and sample code here.

License

This project is released under MIT License; check out our Github Repo for more information.

Comments

Any questions or suggestion? Feel free to leave comment here. :)

Load Comments

By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO