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);

View demo page

API

Flipload(el, options)

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]);

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.