restlessmedia/example.html

## example.html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
    <style type="text/css">
        .loading {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            visibility: hidden;
            background-color: #fff;
            width: 100%;
            min-height: 100%;
            height: 100%;
            overflow: hidden;
            transition: visibility 0s linear 0.5s, opacity 0.5s linear;
        }

        .loading.active {
            visibility: visible;
            opacity: 0.5;
            transition-delay: 0s;
        }

        .spinner {
            margin: auto;
            width: 50px;
            height: 23px;
            text-align: center;
            position: relative;
            top: -50%;
            transform: translateY(-50%);
            transition: top .2s ease-in-out;

        }

        .loading.active .spinner {
            top: 50%;
        }

        .spinner > div {
            margin-right: 1px;
            background-color: #225FA4;
            height: 100%;
            width: 6px;
            display: inline-block;
            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% {
                -webkit-transform: scaleY(0.4)
            }
            20% {
                -webkit-transform: scaleY(1.0)
            }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% {
                transform: scaleY(0.4);
            }
            20% {
                transform: scaleY(1.0);
            }
        }
    </style>
</head>
<body>

<header class="navbar navbar-static-top" id="top" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="../" class="navbar-brand"></a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#"></a>
                </li>
            </ul>
        </nav>
    </div>
</header>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="well" id="message1">something that loads</div>
            <div class="well" id="message2">something that loads</div>
            <div class="well" id="message3">something that loads</div>
            <div class="btn-group">
                <button class="btn btn-success">Show</button>
                <button class="btn btn-danger">hide</button>
            </div>
        </div>
    </div>
</div>

<script type="application/javascript" src="jquery.js"></script>
<script type="application/javascript" src="bootstrap.min.js"></script>
<script type="application/javascript" src="loading.js"></script>
<script type="application/javascript">
    (function (loading, $) {

        var message1 = loading.attach('message1');
        var message2 = loading.attach('message2');
        var message3 = loading.attach('message3');

        $('.btn-success').click(function () {
            message1.show();
            message2.show();
            message3.show();
        });

        $('.btn-danger').click(function () {
            message1.hide();
            message2.hide();
            message3.hide();
        });

    }(window.loading, $));
</script>
</body>
</html>

## loader.js
(function (exports, $) {

    var template = '<div class="loading"><div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div></div>';
    var activeClass = 'active';

    var Loading = function (options) {
        this.delay = options.delay || 0;
        this.loader = $(template).get(0);
        this.element = options.element;
        this.element.style.position = 'relative';
        this.element.insertBefore(this.loader, this.element.firstChild);
    };

    Loading.prototype.hasClass = function (name) {
        return this.loader.className && this.loader.className.indexOf(name) > -1;
    };

    Loading.prototype.addClass = function (name) {
        !this.hasClass(name) && (this.loader.className = this.loader.className + (this.loader.className ? ' ' : '') + name);
    };

    Loading.prototype.removeClass = function (name) {
        this.hasClass(name) && (this.loader.className = this.loader.className.replace(new RegExp('\s*' + name + '\s*'), ''));
    };

    Loading.prototype.isVisible = function () {
        return this.hasClass(activeClass);
    };

    Loading.prototype.show = function (delay) {
        if (!this.isVisible()) {
            if (delay === 0) {
                this.addClass(activeClass);
                return;
            }
            if (!this.delay) {
                this.show(0);
                return;
            }
            var that = this;
            this.waiting = setTimeout(function () {
                that.show(0);
            }, this.delay);
        }
    };

    Loading.prototype.hide = function () {
        if (this.waiting) {
            clearTimeout(this.waiting);
            this.waiting = null;
        }
        this.isVisible() && this.removeClass(activeClass);
    };

    exports.attach = function (element) {
        return new Loading({element: typeof(element) === 'string' ? document.getElementById(element) : element, delay: 500});
    }

}(window.loading = {}, $));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
	<style type="text/css">
	.loading {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	visibility: hidden;
	background-color: #fff;
	width: 100%;
	min-height: 100%;
	height: 100%;
	overflow: hidden;
	transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	}

	.loading.active {
	visibility: visible;
	opacity: 0.5;
	transition-delay: 0s;
	}

	.spinner {
	margin: auto;
	width: 50px;
	height: 23px;
	text-align: center;
	position: relative;
	top: -50%;
	transform: translateY(-50%);
	transition: top .2s ease-in-out;

	}

	.loading.active .spinner {
	top: 50%;
	}

	.spinner > div {
	margin-right: 1px;
	background-color: #225FA4;
	height: 100%;
	width: 6px;
	display: inline-block;
	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	animation: stretchdelay 1.2s infinite ease-in-out;
	}

	.spinner .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
	}

	.spinner .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
	}

	.spinner .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
	}

	.spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
	}

	@-webkit-keyframes stretchdelay {
	0%, 40%, 100% {
	-webkit-transform: scaleY(0.4)
	}
	20% {
	-webkit-transform: scaleY(1.0)
	}
	}

	@keyframes stretchdelay {
	0%, 40%, 100% {
	transform: scaleY(0.4);
	}
	20% {
	transform: scaleY(1.0);
	}
	}
	</style>
	</head>
	<body>

	<header class="navbar navbar-static-top" id="top" role="banner">
	<div class="container">
	<div class="navbar-header">
	<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a href="../" class="navbar-brand"></a>
	</div>
	<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
	<ul class="nav navbar-nav">
	<li>
	<a href="#"></a>
	</li>
	</ul>
	</nav>
	</div>
	</header>

	<div class="container">
	<div class="row">
	<div class="col-md-12">
	<div class="well" id="message1">something that loads</div>
	<div class="well" id="message2">something that loads</div>
	<div class="well" id="message3">something that loads</div>
	<div class="btn-group">
	<button class="btn btn-success">Show</button>
	<button class="btn btn-danger">hide</button>
	</div>
	</div>
	</div>
	</div>

	<script type="application/javascript" src="jquery.js"></script>
	<script type="application/javascript" src="bootstrap.min.js"></script>
	<script type="application/javascript" src="loading.js"></script>
	<script type="application/javascript">
	(function (loading, $) {

	var message1 = loading.attach('message1');
	var message2 = loading.attach('message2');
	var message3 = loading.attach('message3');

	$('.btn-success').click(function () {
	message1.show();
	message2.show();
	message3.show();
	});

	$('.btn-danger').click(function () {
	message1.hide();
	message2.hide();
	message3.hide();
	});

	}(window.loading, $));
	</script>
	</body>
	</html>
	(function (exports, $) {

	var template = '<div class="loading"><div class="spinner"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div></div>';
	var activeClass = 'active';

	var Loading = function (options) {
	this.delay = options.delay \|\| 0;
	this.loader = $(template).get(0);
	this.element = options.element;
	this.element.style.position = 'relative';
	this.element.insertBefore(this.loader, this.element.firstChild);
	};

	Loading.prototype.hasClass = function (name) {
	return this.loader.className && this.loader.className.indexOf(name) > -1;
	};

	Loading.prototype.addClass = function (name) {
	!this.hasClass(name) && (this.loader.className = this.loader.className + (this.loader.className ? ' ' : '') + name);
	};

	Loading.prototype.removeClass = function (name) {
	this.hasClass(name) && (this.loader.className = this.loader.className.replace(new RegExp('\s' + name + '\s'), ''));
	};

	Loading.prototype.isVisible = function () {
	return this.hasClass(activeClass);
	};

	Loading.prototype.show = function (delay) {
	if (!this.isVisible()) {
	if (delay === 0) {
	this.addClass(activeClass);
	return;
	}
	if (!this.delay) {
	this.show(0);
	return;
	}
	var that = this;
	this.waiting = setTimeout(function () {
	that.show(0);
	}, this.delay);
	}
	};

	Loading.prototype.hide = function () {
	if (this.waiting) {
	clearTimeout(this.waiting);
	this.waiting = null;
	}
	this.isVisible() && this.removeClass(activeClass);
	};

	exports.attach = function (element) {
	return new Loading({element: typeof(element) === 'string' ? document.getElementById(element) : element, delay: 500});
	}

	}(window.loading = {}, $));