ldLoader

tiny handy library (<5k) to manipulate loader's state.

Load Me
Unload ←
Load Group
Load Custom
GitHub

Preloading Made Easy

ldLoader is a JavaScript library that helps you control the state of your loader.

Download

ldLoader is available for downloading in its Github Repo. Or, you can get it directly with following links:

You could also use ldLoader directly via CDN like jsDelivr:

Or, via npm:

npm i ldLoader

Basic usage

First, include required JS and CSS files, which you can find in ldLoader's Github Repo. Then create a loader element and initialize it with ldLoader constructor:

<!-- 1. include required files --> <link rel="stylesheet" type="text/css" href="ldld.css"/> <script src="ldld.js"></script> <!-- 2. add a node for loader --> <div id="my-loader" class="text-danger ldld bare"></div>

/* 3. create a new ldLoader object with the newly added node */ var ldld = new ldLoader({ root: "#my-loader" }); /* 4. active this loader */ ldld.on();

Result

The mechanism is simple: it provides an interface to control loaders' state by toggling CSS class 'running':

/* when on is called */ ldld.on();

/* running class will be added */ <div class="running"> ... </div>
/* when off is called */ ldld.off();

/* running class will be removed */ <div class=""> ... </div>

Built-in Loaders

ldLoader is designed to be used with custom-defined loaders or external CSS, but it's also shipped with a set of loaders.

bare
Load it


a simple spinner with a spinning double ring.

(new ldLoader({root: ".ldld.bare"})).on();

<div class="ldld bare"></div>

default
Load it


the same as bare spinner, but auto centered inside a container.

(new ldLoader({root: ".ldld.default"})).on();

<div class="ldld default"></div>

full
Load it


full screen spinner that occupies the whole web page.

Click Me to Dismiss
(new ldLoader({root: ".ldld.full"})).on();

<div class="ldld full"></div>

Modifier
Load it


Adjust loader size with sm or em-1 classes. Applicable on default and bare loader.

Additionally, use light or dark to adjust default color. Default color is CurrentColor.

<div class="btn btn-primary"> Loading... <div class="ldld bare em-1 d-inline-block dark ml-2 align-middle"></div> </div>

Work with Loading Buttons

Loading Buttons is a css library for loading indicator, which provides a set of CSS that helps you design the visual appearence of loading indicator inside a HTML box element.

While Loading Buttons doesn't provide JS API, you can control Loading Buttons' state by simply using ldLoader:

var ldbtn = new ldLoader({root: "#my-ldbtn"});

<div id="my-ldbtn" class="btn btn-primary ld-ext-right" onclick="ldbtn.toggle()"> <span> Click Me </span> <div class="ld ldld bare" style="width:1em;height:1em"> </div> </div>
Click Me

Grouping

You can toggle multiple loaders with one ldLoader instance.

var ldld = new ldLoader({ root: Array.from( document.querySelectorAll(".my-group-1") ) })));

<div class="btn ld-ext-right my-group-1"> Group 1 ... </div> <div class="btn ld-ext-right my-group-2"> Group 2 ... </div> <div class="btn ld-ext-right my-group-1"> Group 1 ... </div>
Group 1
Group 2
Group 1

Customization

It's quite simple to use ldLoader along with your own CSS and images. All you have to add is the "ldld" class and a ldLoader instance.

var ldld = new ldLoader({root: ".ldld"});

<div class="my-btn" onclick="ldld.toggle();"> Load More </div> <img class="ldld" src="my-awesome-loader.svg"/>
Load More

Scripting

ldLoader also provides an interface for you to script your own loader. When initializing the ldLoader instance, passing a "ctrl" object with "step" function which will be invoke repeatedly during loader is on:

var ldld = new ldLoader({ root: ".btn", ctrl: { step: function(t) { this.innerText = Math.round(t); }} })));

<div class="btn btn-primary"> Click to Run </div>
Click to Run

The "t" parameter in function step is the elapsed time since the loader is on, in milliseconds, and the this object is the element in context.

Configurations

Except the configurations described above, you can also alter ldLoader's behavior by following configurations:

APIs

a ldLoader instance exposes following API functions:

Browser Compatibility

ldLoader is compatible with all modern browsers. However, it uses two web features that will fail for IE older than version 9:

Fortunately you can easily find polyfills for both classList and requestAnimationFrame to support IE9.

License

ldLoader is released under MIT License. License file can be found under ldLoader's GitHub repository.

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