Flipping HTML elements to show a loading indicator easily.
It's compatible with:
$ component install pazguille/flipload
See: https://github.com/component/component
Also, you can use the standalone version:
<script src="flipload.js"></script>
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);
Create a new instance of Flipload
.
el
: A given HTMLElement
to create an instance of Flipload
.options
: An optional Options Object
to customize an instance.
className
: Add a custom className to reverse
element.line
: Rotate around horizontal
or vertical
line. By default is vertical
line.theme
: Select what spinner theme you want to use: light
or dark
. By default is dark
.text
: Adds some text to the spinner
.var flipload = new Flipload(box, [options]);
Flips and shows the spinner
.
flipload.load();
Update size and positon values of the reverse
element and spinner
.
flipload.update();
Enables an instance of Flipload
.
flipload.enable();
Disables an instance of Flipload
.
flipload.disable();
Flips and shows or hides the spinner
element.
flipload.toggle();
Flips and hides the spinner
.
flipload.done();
Destroys an instance of Flipload
.
flipload.destroy();
Copyright (c) 2013 @pazguille Licensed under the MIT license.