Fork me on GitHub

Material design style spinner loader demo page

This is a material design style SVG/CSS3 loader spinner which degrades gracefully in browsers that do not support SVG animations.
The library is using vanilla javascript. No external libraries required.

Useage

Include flexpaper-spinner.css and flexpaper.spinner.js on your web page.
Create a element that you want to use as place holder for your spinner. In this example we'll use:

        <div id="spinner-target" style="left:60%;top:40%;"></div>
        



Add the following javascript snippet to your page whenever you want to loader spinner to show
        <script>
        FLEXPAPER.utils.addSpinner({
            element     : 'spinner-target',
            width       : 100,
            height      : 100,
            logo        : 'images/flexpaper-logo.png'
        });
        </script>
        

Browser support

All major browsers and platforms. Internet Explorer version 9 and below will not animate but still show your logo



Maintained and sponsored by █▒▓▒░ The FlexPaper Project