TYPO loader

loader for typo.polona.pl

by Grzegorz Matyszewski

HTML

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="87.6px" height="95.8px" viewBox="0 0 87.6 95.8" enable-background="new 0 0 87.6 95.8" xml:space="preserve">
<polygon fill="#333333" points="0,0 0,0 0,0 ">
    <animate id="black-anim" attributeName="points" dur="250ms" to="0,87.4 0,0 87.6,0" fill="freeze" begin="indefinite"/>
    <animate id="black-reverse-anim" attributeName="points" dur="300ms" to="0,0 0,0 0,0" fill="freeze" begin="white-reverse-anim.begin"/>
</polygon>
<polygon fill="#FFFFFF" points="0,0 0,0 0,0">
    <animate id="white-anim" attributeName="points" dur="250ms" to="87.6,0 57.6,95.6 0,87.4" fill="freeze" begin="black-anim.begin"/>
    <animate id="white-reverse-anim" attributeName="points" dur="300ms" to="0,0 0,0 0,0" fill="freeze" begin="indefinite"/>
</polygon>
<circle fill="#FFFFFF" cx="22.6" cy="25.6" r="0">
    <animate attributeName="r" repeatCount="indefinite" from="0" to="0" dur="1200ms" values="0;0;2;0;0;0;0" calcMode="linear"/>
</circle>
<circle fill="#FFFFFF" cx="31.5" cy="25.6" r="0">
    <animate attributeName="r" repeatCount="indefinite" from="0" to="0" dur="1200ms" values="0;0;0;2;0;0;0" calcMode="linear"/>
</circle>
<circle fill="#FFFFFF" cx="40.4" cy="25.6" r="0">
    <animate attributeName="r" repeatCount="indefinite" from="0" to="0" dur="1200ms" values="0;0;0;0;2;0;0" calcMode="linear"/>
</circle>
</svg>
<script type="text/javascript>

CSS

body {
    background: #f2ece8;  
    margin: 0;
    padding: 0;
}
#loader {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
#loader circle {
    display: none;
}

JavaScript

var black_anim = document.getElementById("black-anim"),
    white_anim = document.getElementById("white-anim"),
    black_reverse = document.getElementById("black-reverse-anim"),
    white_reverse = document.getElementById("white-reverse-anim"),
    circle_anims = $('#loader').find('circle animate'),
    bool = false;

setInterval(function(){
    bool = !bool;
    if(bool){
        black_anim.beginElement();
        white_anim.beginElement();
        console.log($('#loader'));
        $('#loader').find('circle').show();
    }
    else {   
        black_reverse.beginElement();
        white_reverse.beginElement();
        $('#loader').find('circle').hide();
    }
}, 2000);