tiny handy library (<5k) to manipulate loader's state.
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:
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:
Result
The mechanism is simple: it provides an interface to control loaders' state by toggling CSS class 'running
':
on
is called */
ldld.on();running
class will be added */
<div class="running"> ... </div>off
is called */
ldld.off();running
class will be removed */
<div class=""> ... </div>
ldLoader is designed to be used with custom-defined loaders or external CSS, but it's also shipped with a set of loaders.
a simple spinner with a spinning double ring.
the same as bare spinner, but auto centered inside a container.
full screen spinner that occupies the whole web page.
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.
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:
You can toggle multiple loaders with one ldLoader instance.
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.
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:
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:
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. :)
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.