JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Flipping elements and show a loading indicator easily.
    Filed under 

    • 🔾11%Overall
    • 293
    • 122.4 days
    • 🕩27
    • 👥1

    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.

    Show All