pazguille / flipload

Flipping elements and show a loading indicator easily.

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.

flipload's Issues

Cannot call method 'getPropertyValue'

I'm using the standalone version. So, I just include it with <script> tag, also I include the flipload.css file too.

See the error message:
Uncaught TypeError: Cannot call method 'getPropertyValue' of null

That error occurs at the last line of the following snippet:

/**
 * Creates the reverse element.
 * @memberof! Flipload.prototype
 * @function
 * @private
 * @returns {flipload} Returns the instance of Flipload.
 */
        Flipload.prototype._createReverse = function() {

            this.reverse = doc.createElement('div');

            this.reverse.style.position = win.getComputedStyle(this.el, null).getPropertyValue('position') === 'fixed' ? 'fixed' : 'absolute';

My javascript code is:

YUI().use('node', function(Y) {

    var siginForm = Y.one('#siginForm');
    var flip = new Flipload(siginForm);

    siginForm.on('onsubmit', function() {
        flip.load();
        window.setTimeout(function() {
            flip.done();
        }, 2000);
    });
});

The form tag has the flipload-front and flipload-front-vertical classes.
What did i do wrong?

Just an awesome Plugin, but

Can i write it in the JQuery syntax

var Flipload = require('flipload');
box = document.getElementById('box'),
flip = new Flipload(box);