le loader.js, an easy to use loader (spinner) factory. Every new loader can be instanciated this way: var myLoader = Loader.methods.register(node, state, type, className) // node is native node, state if 0/1 as hidden/displayed, type depends on the mixin, className for adding special class It also returns some methods like hide / show or whateve…

loader.js

;
(function(root, $) {
  var loaderArray = [], 
    dummyDiv = document.createElement("div");

    var asSimpleLoader = (function() {
        var spinner = dummyDiv.cloneNode(true),
            make = function() {
                this.container.appendChild(spinner.cloneNode(true));
                
                return this
            };

        spinner.className = "loader-spinner";

        return function() {
            this.spinner = spinner;
            this.make = make;

            return this
        }
    }());

    var asProgressBar = (function() {
        var progressBarContainer = dummyDiv.cloneNode(true),
            progressBar = dummyDiv.cloneNode(true);

        progressBarContainer.className = loader-progress-container";
        progressBar.className = "loader-progress";
        
        var make = function() {
                this.progressBar = progressBar.cloneNode(true);
                this.progressBarContainer = progressBarContainer.cloneNode(true);

                this.progressBarContainer.appendChild(this.progressBar);
                this.container.appendChild(this.progressBarContainer);
                
                return this
            },
            update = function(number) {
                this.progress = parseInt(number)
                
                // update the progress bar
                if (!!~this.container.className.search(/\d/g)) {
                    this.container.className = this.container.className.replace(/(\d)+/g, parseInt(number));
                } else {
                    this.container.className += " loader-progress-"+parseInt(number);
                }

                this.progressBar.style.width = number+"%";

                if (number == 100) {
                    this.trigger("loaded");
                } else {
                    this.trigger("update");
                }
            };

        return function() {
            this.progress = 0;
            this.update = update;
            this.make = make;

            return this
        }
    }());

    var loaderMap = {
        "simpleLoader": asSimpleLoader,
        "progressBar": asProgressBar,
        "icons": asIcons
    };

    var Loader = (function() {
        // basic ON / OFF MAP
        var stateCSS = ["none", "block"];   

        // basic DIVS :)
        var dummyContainer = dummyDiv.cloneNode(true),
            dummyOverlay = dummyDiv.cloneNode(true);

        // some DOM API pre-building.
        dummyOverlay.className = "loader-overlay";
        dummyContainer.className = "loader";
        dummyContainer.appendChild(dummyOverlay);
            
        var LDR = function(node, state, className) {
            var self = this;

            this.container = dummyContainer.cloneNode(true);
            this.overlay = dummyOverlay.cloneNode(true);
            this.state = state;
            this.handlers = {"show": [], "hide": []};
            
            var container = this.container;

            // basic behaviour
            this.behaviours = {
                "show": function() {
                    container.className = container.className.replace(/\stoggle/g, "");
                    container.style.display = stateCSS[1];
                },
                "hide": function() {
                    container.className += " toggle";
                    setTimeout(function() {
                        container.style.display = stateCSS[0];
                    }, 400);
                }
            }

            if(!!className) {
                this.container.className += " "+className;
            }

            this.make();
            node.appendChild(container);
        }
        
        LDR.prototype.show = function() {
            this.behaviours.show();
            this.trigger("show");
        }

        LDR.prototype.hide = function() {
            this.behaviours.hide();
            this.trigger("hide");
        }

        LDR.prototype.trigger = function(event) {
            var handlers = this.handlers[event],
                args = Array.prototype.slice.call(arguments, 1);

            if (!!handlers) {
                for (var i = 0, max = handlers.length; i < max; i++) {
                    handlers[i].apply(this, args);
                }
            }
        }

        LDR.prototype.addHandlers = function(event, handler) {
            if (!this.handlers[event]) {
                this.handlers[event] = [];
            }

            this.handlers[event].push(handler);
        }

        return LDR
    }());
    
    var LDR = null, map = null;
    function registerLoader(node, state, type, className) {
        // check the map
        map = (!!loaderMap[type] ? loaderMap[type] : loaderMap["simpleLoader"]);
        
        // do the call
        map.call(Loader.prototype);

        LDR = new Loader(node, (!!state || state===0) ? state : undefined, className || null);

        loaderArray.push(LDR);

        return LDR
    }

    function debug() {
        console.log(loaderArray);
    }

    w.Loader = {
        "methods": {
            "register": registerLoader
        },
        "debug":  debug
    };
}(this, jQuery))