ldloader

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #llm #android #deep-learning #linux #nodejs #windows #cli #pytorch #mcp #openai

(★ 21)

handy library to manipulate loader's state.

ldloader 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ldloader

handy library to manipulate loader's state. for more information, please check [ldloader documentation](https://loading.io/lib/loader/).

## Usage

create an object for each loader you want to use:

var ldld = new ldloader(config);

config includes following options:

* root: element for your loader. default null
   - could be css selector, element, or array of css selectors/elements.
   - ldloader will create one automatically if omitted, and append it under container.
   - if root is an array, ldloader instance will work on every element in the array.
 * container: where root should be put in.
   - will be root.parentNode if omitted.
   - will be document.body if both root and container is omitted.
   - note: container is also an array since root by design accept array of value.
 * class-name: additional class over root. default '' and is optional.
   - you can also add classes directly onto the root element you provided.
 * active-class: class added to root when loader is toggled on. default 'running'.
   - useful when working with different css libraries.
 * inactive-class: class added to root when loader is toggled off. default is null.
 * autoZ: update root's z-index automatically. default false.
 * baseZ: the minimal z-index of root. default 4000.
   - with autoZ, ldloader keeps track of all loaders' z-index and always use larger z-index for newly toggled loaders.
     baseZ is then used as a base value for all autoZ loaders.
   - for using scoped zmgr, set `baseZ` to undefined to instruct zmgr to use scoped z value.
 * ctrl: custom animation control unit. should at least contains a member function "step(t)".
   - step(t): will be invoked repeatedly by requestAnimationFrame during loading period. context (aka this) will be root.
 * atomic: default true. when atomic is false, you will need N ldloader.off() call to dismiss ldloader if there was already N ldloader.on() call.
 * toggler(v): optional toggler triggered when `on/off` status changed. useful for chaining toggling events.
   - `v`: on/off status.

Methods:

* on(delay): toggle loader on. return promise. (if delay is provided, wait delay(ms) before on )
 * off(delay): toggle loader off. (if delay is provided, wait delay(ms) before off )
 * cancel(v): cancel delayed action. force state to `v` if v is defined.
 * is-on: return true if loader is running, else false.
 * toggle(state,delay): toggle loader based on state(true/false). toggle according to current state if state is omitted. return promise ( delay behavior according to whether it's on or off )
 * on(event, cb): listen to events, including: ( TBD? conflict with on(delay) )
   - toggle.on
   - toggle.off

## Class Method

* setZmgr(zmgr): set a shared z-index manager. useful to manager widget z-index globally.
   this manager should provide following methods:
   - add(baseVal, size): return actual added value.
     - baseVal: hint value for the z-index we'd like to use
     - size: hint size about how large the object we added is
   - remove(val): remove val ( returned by add ) from this manager.

## Styling and Structure

There is no constraint about how ldloader's DOM structure should be. Basically it contains an element for loader, and the element's parent in which the loader is shown. You control all the animation and effects based on `active-class` toggled by ldloader.

For convenience, ldloader is shipped with some builtin css for simple usage:

* .ldld.bare - rotating double ring, placed at where it should be.
 * .ldld.default - rotating double ring centered in it's container. container should have style position: relatve/absolute/fixed.
 * .ldld.full - dimed full screen blocking loader, with rotating double ring in the middle.
 * size modifier for .ldld.bare  and .ldld.default:
   * .sm - 16 x 16
   * .em-1 - 1em x 1em ( useful in button )
   * .em-2 - 2em x 2em
 * color modifier:
   * without color modifier, it will `currentColor` by default.
   * .ldld.light - rgba(255,255,255,.5)
   * .ldld.dark - rgba(0,0,0,.5)

You can also use ldloader along with `loading-btn` and `loading.css`:

<div class="btn ld-ext-right">
      Load
      <div class="ld ld-ball ld-bounce"></div>
    </div>
    <script>
      var ldld = new ldloader({root: ".ld-ext-right"});
      ldld.on(); ldld.off(1000);
    </script>

## License

MIT

ldloader

ldloader 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ldloader

ldloader 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README