🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Flipping HTML elements to show a loading indicator easily.It’s compatible with:ChromeFirefoxSafari

Animation Core Java Script

Documentation

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.


You May Also Like