Skip to content

Latest commit

 

History

History
117 lines (86 loc) · 2.35 KB

README.md

File metadata and controls

117 lines (86 loc) · 2.35 KB

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

License

Copyright (c) 2013 @pazguille Licensed under the MIT license.