Loader.JS by Technetium PHP Framework

Dependencies

jQuery

Usage

Include CSS and JS files

<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.cruzium.info/loader-js/latest/loader.min.css" />
<script type="text/javascript" src="https://cdn.cruzium.info/loader-js/latest/loader.min.js"></script>

HTML Markup

To prevent undesired flickering during document load, include the following as a direct descendent of <body>. Otherwise, it will be automatically added to DOM at a later time.

<div class="loader-js">
    <div class="loader-js-spinner dual-ring"></div>
</div>

Methods

Name	Description	Return
`close(callback)`	Close the loader overlay if no more events are pending.	void
`configure(object)` `configure(key, value)`	Configure the loader instance, call before `init()` See Configure Options for more details.	void
`init([evt1, evt2, evt3, ...])`	Initialize loader instance, and listen to the given events. See `listen([evt1, evt2, evt3, ...])` for more details.	void
`open(callback)`	Open loader overlay.	void
`listen([evt1, evt2, evt3, ...])`	Listen to the given events, open loader overlay, and close it after the events are fired.	void
`unlisten([evt1, evt2, evt3, ...])`	Unlisten to the given events and close the loader overlay if no more events are pending.	void
`unlistenAll()`	Unlisten all events and close the loader overlay.	void

Configure Options

Name	Type	Default	Description
beforeunload	boolean	false	Whether to open loader overlay on document unload. Note: Need to be configured before `init()` is called or nothing will happen.
duration	int	400	Animation duration in milliseconds.
style	string	'dual-ring'	Available styles: `blocks`, `dual-ring`, `ellipsis`, `infinity`, `radio`, `rolling`, `spin`