Skip to content

Instantly share code, notes, and snippets.

@restlessmedia

restlessmedia/example.html

Last active August 29, 2015 14:05
Show Gist options
  • Save restlessmedia/cbcd2bfcac82a83696b1 to your computer and use it in GitHub Desktop.
Save restlessmedia/cbcd2bfcac82a83696b1 to your computer and use it in GitHub Desktop.
Download ZIP
Simple loader
Raw
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>
Raw
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 = {}, $));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment