» » Datalife Engine Loading

Datalife Engine Loading

Datalife Engine Loading


Datalife Engine smulkus patobulinimas, kuris išveda gražesnį animuota loading pasitelkus tik CSS.
1. Atsidarome savo dizaino engine.css ir surandame:
#loading-layer


Visą klasę pakeičiame į:
#loading-layer{display:none;background:rgb(0,0,0);padding:15px;width:310px;height:50px;box-shadow:0px 0px 10px rgba(0,0,0,1);}
.spinner-text{position:absolute;margin:0;top:23px;left:90px;font-size:16px;font-weight:normal;text-align:center;color:rgb(255,255,255);letter-spacing:1px;width:230px;}

.windows8{position:relative;width:50px;height:50px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}
.windows8 .wBall{position:absolute;width:48px;height:48px;opacity:0;-moz-transform:rotate(225deg);-moz-animation:orbit 4.4s infinite;-webkit-transform:rotate(225deg);-webkit-animation:orbit 4.4s infinite;-o-transform:rotate(225deg);-o-animation:orbit 4.4s infinite;-ms-transform:rotate(225deg);-ms-animation:orbit 4.4s infinite;transform:rotate(225deg);animation:orbit 4.4s infinite;}
.windows8 .wBall .wInnerBall{position:absolute;width:7px;height:7px;background:#FFFFFF;left:0px;top:0px;-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;-ms-border-radius:6px;border-radius:6px;}
.windows8 #wBall_1{-moz-animation-delay:0.96s;-webkit-animation-delay:0.96s;-o-animation-delay:0.96s;-ms-animation-delay:0.96s;animation-delay:0.96s;}
.windows8 #wBall_2{-moz-animation-delay:0.19s;-webkit-animation-delay:0.19s;-o-animation-delay:0.19s;-ms-animation-delay:0.19s;animation-delay:0.19s;}
.windows8 #wBall_3{-moz-animation-delay:0.38s;-webkit-animation-delay:0.38s;-o-animation-delay:0.38s;-ms-animation-delay:0.38s;animation-delay:0.38s;}
.windows8 #wBall_4{-moz-animation-delay:0.58s;-webkit-animation-delay:0.58s;-o-animation-delay:0.58s;-ms-animation-delay:0.58s;animation-delay:0.58s;}
.windows8 #wBall_5{-moz-animation-delay:0.77s;-webkit-animation-delay:0.77s;-o-animation-delay:0.77s;-ms-animation-delay:0.77s;animation-delay:0.77s;}
@-moz-keyframes orbit{
0%{opacity:1;z-index:99;-moz-transform:rotate(180deg);-moz-animation-timing-function:ease-out;}
7%{opacity:1;-moz-transform:rotate(300deg);-moz-animation-timing-function:linear;-moz-origin:0%;}
30%{opacity:1;-moz-transform:rotate(410deg);-moz-animation-timing-function:ease-in-out;-moz-origin:7%;}
39%{opacity:1;-moz-transform:rotate(645deg);-moz-animation-timing-function:linear;-moz-origin:30%;}
70%{opacity:1;-moz-transform:rotate(770deg);-moz-animation-timing-function:ease-out;-moz-origin:39%;}
75%{opacity:1;-moz-transform:rotate(900deg);-moz-animation-timing-function:ease-out;-moz-origin:70%;}
76%{opacity:0;-moz-transform:rotate(900deg);}
100%{opacity:0;-moz-transform:rotate(900deg);}
}
@-webkit-keyframes orbit{
0%{opacity:1;z-index:99;-webkit-transform:rotate(180deg);-webkit-animation-timing-function:ease-out;}
7%{opacity:1;-webkit-transform:rotate(300deg);-webkit-animation-timing-function:linear;-webkit-origin:0%;}
30%{opacity:1;-webkit-transform:rotate(410deg);-webkit-animation-timing-function:ease-in-out;-webkit-origin:7%;}
39%{opacity:1;-webkit-transform:rotate(645deg);-webkit-animation-timing-function:linear;-webkit-origin:30%;}
70%{opacity:1;-webkit-transform:rotate(770deg);-webkit-animation-timing-function:ease-out;-webkit-origin:39%;}
75%{opacity:1;-webkit-transform:rotate(900deg);-webkit-animation-timing-function:ease-out;-webkit-origin:70%;}
76%{opacity:0;-webkit-transform:rotate(900deg);}
100%{opacity:0;-webkit-transform:rotate(900deg);}
}
@-o-keyframes orbit {
0%{opacity:1;z-index:99;-o-transform:rotate(180deg);-o-animation-timing-function:ease-out;}
7%{opacity:1;-o-transform:rotate(300deg);-o-animation-timing-function:linear;-o-origin:0%;}
30%{opacity:1;-o-transform:rotate(410deg);-o-animation-timing-function:ease-in-out;-o-origin:7%;}
39%{opacity:1;-o-transform:rotate(645deg);-o-animation-timing-function:linear;-o-origin:30%;}
70%{opacity:1;-o-transform:rotate(770deg);-o-animation-timing-function:ease-out;-o-origin:39%;}
75%{opacity:1;-o-transform:rotate(900deg);-o-animation-timing-function:ease-out;-o-origin:70%;}
76%{opacity:0;-o-transform:rotate(900deg);}
100%{opacity:0;-o-transform:rotate(900deg);}
}
@-ms-keyframes orbit {
0%{opacity:1;z-index:99;-ms-transform:rotate(180deg);-ms-animation-timing-function:ease-out;}
7%{opacity:1;-ms-transform:rotate(300deg);-ms-animation-timing-function:linear;-ms-origin:0%;}
30%{opacity:1;-ms-transform:rotate(410deg);-ms-animation-timing-function:ease-in-out;-ms-origin:7%;}
39%{opacity:1;-ms-transform:rotate(645deg);-ms-animation-timing-function:linear;-ms-origin:30%;}
70%{opacity:1;-ms-transform:rotate(770deg);-ms-animation-timing-function:ease-out;-ms-origin:39%;}
75%{opacity:1;-ms-transform:rotate(900deg);-ms-animation-timing-function:ease-out;-ms-origin:70%;}
76%{opacity:0;-ms-transform:rotate(900deg);}
100%{opacity:0;-ms-transform:rotate(900deg);}
}
@keyframes orbit {
0%{opacity:1;z-index:99;transform:rotate(180deg);animation-timing-function:ease-out;}
7%{opacity:1;transform:rotate(300deg);animation-timing-function:linear;origin:0%;}
30%{opacity:1;transform:rotate(410deg);animation-timing-function:ease-in-out;origin:7%;}
39%{opacity:1;transform:rotate(645deg);animation-timing-function:linear;origin:30%;}
70%{opacity:1;transform:rotate(770deg);animation-timing-function:ease-out;origin:39%;}
75%{opacity:1;transform:rotate(900deg);animation-timing-function:ease-out;origin:70%;}
76%{opacity:0;transform:rotate(900deg);}
100%{opacity:0;transform:rotate(900deg);}
}


2. Atsidarome index.php ir surandame:
<div id="loading-layer" style="display:none">{$lang['ajax_info']}</div>


Pakeičiame į:
<div id="loading-layer" style="display:none"><span class="spinner-text">{$lang['ajax_info']}</span><div class="windows8"><div class="wBall" id="wBall_1"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_2"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_3"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_4"><div class="wInnerBall"></div></div><div class="wBall" id="wBall_5"><div class="wInnerBall"></div></div></div></div>

Tinka: 9.x,10.x

Komentarai

Informacija

Mielas lankytojau. Tu čia esi kaip neregistruotas vartotojas.
Mes siūlome tau užsiregistruoti arba tiesiog prisijungti naudojant savo prisijungimo duomenis, tam, kad galėtum įkelti bei komentuoti norimas naujienas.

Susirašinėjimai