ANIMASI LOADING - FREE INFORMATION
Headlines News :
Home » » ANIMASI LOADING

ANIMASI LOADING

Written By harezpector on Sabtu, 23 Maret 2013 | 05.05












Taruh kode CSS berikut di atas kode ]]>
"#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;
border: 5px solid #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spinPulse 1s infinite ease-in-out;
-webkit-animation: spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;
border: 5px solid #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;

-moz-animation: spinoffPulse 1s infinite linear;
-webkit-animation: spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #00a3ff} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

pasang script jquery 1.7.2 tepat di atas tag 
 atau kalau ada JQuery terbaru, silahkan pasang yang terbaru.
"

Letakkan kode berikut tepat di atas tag 










Penyesuaian Warna
Tambahan dari Hack4rt, untuk yang ingin menyesuaikan warna loading nya dengan warna lain, karena Hack4rt memakai kode #00a3ff pada loading halaman. Jika ingin mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna birumuda dengan kode warna yang diinginkan.

Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

ILMU GRAFIS INDONESIA

blog

cara membuat

Social Icons

Featured Posts

IKLAN IKLAN

Sample Text

PASANG IKLAN

 
Support : Creating Website | Haris Template | Mas Template
Proudly powered by Blogger
Copyright © 2011. FREE INFORMATION - All Rights Reserved
Template Design by Creating Website Published by Mas Template