Loadr examples

by Dimitar Christoff

HTML

<script src="https://rawgit.com/DimitarChristoff/loadr/blob/master/dist/loadr.min.js"></script>
<script src="https://cdn.rawgit.com/DimitarChristoff/loadr/master/dist/loadr.min.js"></script>
<section class="one">

</section>
<section class="two">
	<div class="sk-three-bounce">
		<div class="sk-child sk-bounce1"></div>
		<div class="sk-child sk-bounce2"></div>
		<div class="sk-child"></div>
	</div>
	<div class="loader-text"></div>
</section>
<section class="three">
	<div class="sk-spinner sk-spinner-pulse"></div>
	<div class="loader-text">
		<div class="hide"></div>
		<div class="hide"></div>
	</div>
</section>

SCSS

@import url(https://rawgit.com/tobiasahlin/SpinKit/master/css/spinkit.css);
@import url(https://fonts.googleapis.com/css?family=Anton);

body {
    margin: 0;
    font-family: "Helvetic Neue", Helvetica, Arial;
    font-size: 12px;
}

section {
    border-bottom: 1px solid #444;
    box-shadow: inset 0 0 2px rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.5);
    padding: 10px;
    margin-bottom: 5px;
    position: relative;
    &:after {
        position:absolute;
        right: 10px;
        top: 0;
        width: 120px;
        content: 'section';
        background: #fff;
        border: 1px solid #aaa;
        border-top: none;
        font-size: 8px;
        text-align: center;
        color: black;
        text-shadow: none;
        box-shadow: inset 0 0 1px rgba(0,0,0,.2);
    }
}


.one {
    background: linear-gradient(#fff, #ccc);
    color: #500;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    z-index: 10;
    &:after {
        content: 'example 1: plain (defaults)'
    }
}

.two {
    /*text-transform: uppercase;*/
    font-size: 20px;
    background: linear-gradient(#800, #600);
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,.5);
    transform: translateY(-5px);
    &:after {
        content: 'example 2: dots as "before"'
    }
}

.sk-three-bounce {
    display: inline-block;
    margin: 0;
}

.loader-text {
    display: inline-block;
    font-family: Anton;
}

.sk-three-bounce > div.sk-child {
    display: inline-block;
    width: 16px;
    height: 16px;
    font-size: 10px;
    background: white;
}


.three {
    box-sizing: border-box;
    font-size: 32px;
    background: linear-gradient(#fff, #ccc);
    transform: translateY(-10px);
    z-index: 5;
    &:after {
        content: 'example 3: manual animationend'
    }
}

.three .loader-text {
    height: 32px;
    display: block;
    text-align: center;
    posotion: relative;
    margin-bottom: 20px;
}
.three .loader-text > div {
    transition: .5s all linear;
    opacity: 1;
    color:...

JavaScript

(function(Loadr){
		'use strict';

		(function(){
			var i = new Loadr(document.querySelector('section.one'));
			i.start();
		}());

		(function(){
			// sync to animation time manually.
			var i = new Loadr(document.querySelector('section.two div.loader-text'), {
				delay: 1400
			});
			i.start();
		}());

		(function(){
			// manually doing stuff, just getting new messages
			var i = new Loadr();

			var i3s = document.querySelectorAll('section.three div.loader-text > div'),
				last = 0,
				spinner = document.querySelector('section.three .sk-spinner-pulse'),
				getNewMessages = function(){
					i3s[last].innerHTML = i.get();
					i3s[last].classList.remove('hide');
					last = last == 0 ? 1 : 0;
					i3s[last].classList.add('hide');
				};

			spinner.addEventListener('animationiteration', getNewMessages, false);
			spinner.addEventListener('animationstart', getNewMessages, false);

			Array.prototype.forEach.call(i3s, function(el){
				el.innerHTML = i.get();
			});
		}());
	}(loadr.default));