prelodr
v2.1.1
Published
A simple Material preloader inspired by Google Inbox
Downloads
550
Maintainers
Readme
Prelodr
A simple Material preloader inspired by Google Inbox.
:tada: View demo on Codepen
For React style check out react-prelodr.
Install
yarn add prelodr --dev
npm install prelodr --save-dev
CDN
The UMD and style files are also available on unpkg:
<link href="https://unpkg.com/prelodr/dist/prelodr.min.css">
<script src="https://unpkg.com/prelodr/dist/prelodr.min.js"></script>
Available on JSDelivr
<link href="https://cdn.jsdelivr.net/prelodr/latest/prelodr.min.css">
<script src="https://cdn.jsdelivr.net/prelodr/latest/prelodr.min.js"></script>
Available on cdnjs
<link href="https://cdnjs.cloudflare.com/ajax/libs/prelodr/2.1.1/prelodr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prelodr/2.1.1/prelodr.min.js"></script>
You can use the library via window.prelodr
.
Usage
const pre = require('prelodr')()
// a) Show prelodr
pre.show('Loading...')
// b) Hide prelodr
pre.hide()
Async and chaining support
show(fn)
method supports an optional (fn) callback function.
const pre = Prelodr()
// Step 1
pre
.show('Initializing...')
.hide(done => {
console.log(' 1 second delay... ')
setTimeout(() => {
done()
}, 1000)
})
// Step 2
pre
.show('Processing...')
.hide(done => {
console.log(' 2 seconds delay... ')
setTimeout(() => {
done()
}, 3000)
})
// Step 3
pre
.show('Closing...')
.hide()
Options
container
: Container element to append the preloader.zIndex
:zindex
style value.auto
: If it'strue
preloader shows automaticatly. Defaultfalse
duration
: Timing for show and hide transition.text
: Default showing text.prefixClass
: Prefix class for prelodr. Default isprelodr
class.
Methods
Prelodr.show(text)
Show the prelodr.
text
{String} : Text for prelodr.
Prelodr.hide(fn)
Hide the prelodr.
fn
{Function} : (Optional) Callback function
Prelodr.setPrefixClass(prefix)
options
{String} : Set the prefix class.
Prelodr.setDuration(miliseconds)
miliseconds
{Number} : Set the transition timing
Prelodr.setZIndex(zindex)
zindex
{Number} : Set thezindex
style value.
Prelodr.getElement()
Return the {HTMLElement} object.
Events
Prelodr.on('shown', fn)
Event when prelodr is shown.
Prelodr.on('hidden', fn)
Event when prelodr is hidden.
Changelog
Check out the changelog
Contributions
If you would like to contribute pull requests and issues will be welcome! Feature requests are welcome too. Please before sending some feature requests make sure provide as much detail and context as possible.
License
MIT license
© 2017 José Luis Quintana