ARK preloader

by levchenko_d

HTML

<div>
    <h1><!-- 0 --></h1>
    <i></i>  
    <i></i>    
    <i></i> 
    <i></i>
</div>

CSS

body {
    background: #34383e;
}

div {
    width: 200px;
    height: 200px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    -webkit-transition: ease 1.2s;
}

div.hide{
    opacity: 0;
}

div h1 {
    line-height: 160px;
    text-align: center;
    font-size: 48pt;
    color: #00b0ef;
    font-family: Calibri;
    font-weight: 100;
}

i {
    width: 100%;
    height: 100%;
    font-size: 48pt;
    line-height: 100%;
    text-align: center;
    border-radius: 50%;
    border: solid 3px #00b0ef;
    display: block;
    -webkit-transform: rotateX(00deg) rotateZ(0deg);
    -webkit-transition: 1s;
    position: absolute;
    top:0;
    left:0;
}

i:nth-of-type(2) {
    -webkit-transition: 0.5s;
}

i:nth-of-type(3) {
    -webkit-transition: 0.5s;
}

div.hover{
    -webkit-transform: rotateY(180deg);
}

div.hover i {
    -webkit-transform: rotateX(-70deg) rotateZ(180deg);
    border-width: 4px;
}

div.hover i:last-of-type {
    -webkit-transform: rotateX(-50deg) rotateY(40deg) rotateZ(-180deg);
}

div.hover i:nth-of-type(3) {
    -webkit-transform: rotateX(-50deg) rotateY(-40deg) rotateZ(-180deg);
}

JavaScript

var div = document.getElementsByTagName('div')[0];
var h = document.getElementsByTagName('h1')[0];
var i = 0;
function cls(){
    div.className = div.className === 'hover' ? '' : 'hover';
    var n = parseInt(h.innerText);
    i++
    if(i>100){
        clearInterval(x);
    }
    /*
    if(n+1<101){
        h.innerText = n+1;
    } else {
        clearInterval(x);
        div.className = 'hide';
    }*/
};

var x = setInterval(function(){
cls();
}, 950);

div.onclick = function(){
    clearInterval(x);
}