Loading Buttons

Bootstrap compatible, pure CSS loading indicator for your button


Download NowCSS 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-heartbeat
Shaking Ball
ld-ball + ld-shake

No JS Required

Loading Buttons contains only CSS. no dependency on JavaScript.

normal


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

loading


<div class="ld-ext-right running"> <div class="ld ld-ball ld-squeeze"> </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

You can get ldbtn.css in its Github repo, via npm i ldbutton, or from this link:

or, via CDN:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/ldbtn.min.css" />

Usage

1. include ldbtn.css:

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

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

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


Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

Bring Your Work Alive

supercharge with unlimited animations, advanced functionalities and support us to make more great stuff!

Free Plan
FREE

  • Access to Free Resources
  • 10 Free Assets
    Save your design as assets online
    for sharing and future use.
Sign Up
Current Plan
Stop Future Billing
Billing Page
 
 
Monthly Plan
9.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
Subscribe
Subscribe
Current Plan
 
7 days refund guarantee
cancel anytime
Yearly Plan
39.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
  • Priority Support
Subscribe
Subscribe
Upgrade
Current Plan
7 days refund guarantee
cancel anytime

Monthly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »

Yearly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »





Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.

Payment Complete

Thank you for purchasing this item!

We have confirmed your purchase and the transaction is complete. Your purchase history can be found in your billing page where you can also find invoice for this payment.

Continue to Download

Subscribed.

Thank you for subscribing our service!

We have confirmed your subscription and the first transaction has been made. You can find your purchase history in your billing page where you can also find invoice for this payment.

Subscription will be automatically renewed at the end of each billing period. You can cancel it anytime in the billing page.


Let's Proceed
You are downloading

Icons

/ icon
generated with loading.io's Pro features. Unlock Pro Features by:
You are downloading

Icons

/ icon
released under Loading.io FREE License. download with:
You are downloading BY Licensed

Icons

/ icon
which can be used for free with attribution. how to attribute?
Free Download
Free Download with Attribution
.. or pay to remove attribution
for unlimited downloads & features
9.99USD
monthly
39.99USD
annually
only for this item
1.99USD
2 days
Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.




Pay Per Item

paid once

includes
  • 2 days pass to download from editor
  • Full features to this item
  • Lifetime licensed, attribution free
  •  Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Monthly Plan

auto renewal

includes
  • whole site unlimited access
  • fully licensed
  • full features
  • Up to 200 Assets
  • priority support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Yearly Plan

auto renewal

includes
  • Unlimited Access
  • Fully Licensed
  • Full Features
  • Up to 200 Assets
  • Priority Support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Free with Attribution


you can ...
  • Free to Use with Attribution
  • Pay to Remove Attribution
  • How to Attribute ...


more about pricing »

Free Download


you can ...
  • Free for Any Purpose
  • No Need to Attribute or Pay


more about pricing »

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.

Customer Service: [email protected]
LOADING.IO