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

Load Me
Unload ←
Load Group
Load Custom

Preloading Made Easy

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


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();


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.

Load it

a simple spinner with a spinning double ring.

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

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

Load it

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

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

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

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>

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


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


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


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.


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


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.


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


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]