Flipload.js
Flipping HTML elements to show a loading indicator easily.
It's compatible with:
- Chrome
- Firefox
- Safari
Installation
$ component install pazguille/flipload
See: https://github.com/component/component
Standalone
Also, you can use the standalone version:
<script src="flipload.js"></script>
How-to
First, you should add the CSS file to your markup:
<link rel="stylesheet" href="flipload.css">
Then, you can start to use it and enjoy!
var Flipload = require('flipload'); box = document.getElementById('box'), flip = new Flipload(box); // Start to load flip.load(); // Loaded window.setTimeout(function () { flip.done(); }, 5000);
API
Flipload(el, options)
Create a new instance of Flipload
.
el
: A givenHTMLElement
to create an instance ofFlipload
.options
: An optional OptionsObject
to customize an instance.className
: Add a custom className toreverse
element.line
: Rotate aroundhorizontal
orvertical
line. By default isvertical
line.theme
: Select what spinner theme you want to use:light
ordark
. By default isdark
.text
: Adds some text to thespinner
.
var flipload = new Flipload(box, [options]);
Flipload#load()
Flips and shows the spinner
.
flipload.load();
Flipload#update()
Update size and positon values of the reverse
element and spinner
.
flipload.update();
Flipload#enable()
Enables an instance of Flipload
.
flipload.enable();
Flipload#disable()
Disables an instance of Flipload
.
flipload.disable();
Flipload#toggle()
Flips and shows or hides the spinner
element.
flipload.toggle();
Flipload#done()
Flips and hides the spinner
.
flipload.done();
Flipload#destroy()
Destroys an instance of Flipload
.
flipload.destroy();
Contact
- Guillermo Paz (Frontend developer - JavaScript developer | Web standards lover)
- E-mail: [email protected]
- Twitter: @pazguille
- Web: http://pazguille.me
License
Copyright (c) 2013 @pazguille Licensed under the MIT license.