Loading Buttons

CSS Button that loads

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

Customizable Loaders

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

No JS Required

Loading Buttons contains only CSS. No dependency on JavaScript.

Highly Compatible

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

Extensible Loaders

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

Even not Buttons

Any place that needs a loader can use Loading Button.

Download

Install via npm:

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

Usage

1. include index.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:

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:

4. trigger it by adding running class to button:

.. which will be like this:

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

here is the result:

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>

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

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:

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:

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:

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.