Bootstrap compatible, pure CSS loading indicator for your button
Customize and generate your own css buttons that support loading effect.
use loading.css to easily add loaders with your own style
Works perfectly with frameworks like Bootstrap, Semantic-ui and Foundation, etc.
Generate your own loader with loading.io and use it here.
Any place that needs a loader can use Loading Button.
sample code with bootstrap 4 card component as below.
You can get ldbtn.css in its Github repo, via
npm i ldbutton, or from this link:
or, via CDN:
1. include ldbtn.css:
2. add modifier to your button. there are 6 modifiers for now, including:
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
here is the result:
For more information about how to use loading.css, please read the online documentation of loading.css.
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:
ld" > My Button </div>
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:
font-size:2em" /> </div> My Button </div>
To add your own loaders with loading.css, use
ld-loader class inside button and config it with
background-image and resize with
Change spinner size might make it overlap with button text, so you probably will want to adjust font-size of the whole button.
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.
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.
This project is released under MIT License; check out our Github Repo for more information.
You might have signed up with another email / password before. please try:
Download after paying or upgrading to Pro with your loading.io account.
You are downloading free license item. Sign in to proceed.
Save your works, design and share with others by logging in loading.io.
Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 VAT No. 52518929
Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.
Any questions or suggestion? Feel free to leave comment here. :)