Memasang loading page dengan CSS3 animasi

pulang tugas pkl di HARCO MANGGA DUA bosen di rumah pergi kewarnet iseng iseng buka blog ,buat cari widget buat blog ini dengan tidak sengaja nemu blog yang ngshere loading page dengan css3 animasi
dengan iseng saya copas untuk menyebar luaskan nya eiiits saya copas bukan berati plagiat saya hanya membantu menyebarluasinnya aje ko  dengan menyebutkan sumbernya hehehe....

ok jangan banyak basa basi langsung aja ke T.K.P





Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin>

    #sliderloadingwrapper {width:100%;height:100%;
    position:fixed;z-index: 999999999999999999999999999999;
    background: rgba(95, 130, 187, 0.2);top: 0px;
    left: 0px;-webkit-animation: fadeOut 15s linear forwards;
    -moz-animation: fadeOut 15s linear forwards;
    -o-animation: fadeOut 15s linear forwards;
    -ms-animation: fadeOut 15s linear forwards;
    animation: fadeOut 15s linear forwards;}
    /* Blog johanes djogzs.blogspot.com */
    #sliderloader {
    width: 500px;
    height: 85px;
    overflow: hidden;
    background-color: #8CA5CE;
    border: 1px Groove #5F82BB;
    -moz-transition: all 170ms ease-in;
    -webkit-transition: all 170ms ease-in;
    -o-transition: all 170ms ease-in;
    position: relative;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: inset 0 0px 20px rgba(0, 0, 0, 0.2), 0 0px 0 #5E524F;
    border-bottom: 1px Groove #222;
    margin: auto;
    margin-top: 200px;}
    #progressbg {
    width:460px;
    margin:auto;
    height:5px;
    background-color:#ddd;
    top:65px;
    position:relative;
    }/* Blog johanes djogzs.blogspot.com */
    #johanesloader {
    width:1px;
    height:5px;
    background-color:#ffd000;
    -moz-animation:johanesloader 70s infinite;
    -webkit-animation:johanesloader 70s infinite;
    position:relative;
    -moz-transition:all 170ms ease-in;
    -webkit-transition:all 170ms ease-in;
    -o-transition:all 170ms ease-in;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader ul {
    width:2630px;
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
    left:0px;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader li {
    display:inline;
    width:500px;
    height:100px;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader li a {
    display:block;
    text-decoration:none;}
    #sliderloader li span {
    display: block;
    width: 460px;
    padding: 10px 20px;
    text-shadow: 1px 1px 1px #362c30;
    pointer-events: none;
    text-align: left;
    float: left;
    border-top: 1px Groove #ddd;
    border-bottom: 1px Groove #ddd;
    }/* Blog johanes djogzs.blogspot.com */
    #sliderloader ul li span h2 {
    font-size:13px;
    line-height:24px;
    color:#fff;letter-spacing: 1px;
    font-weight:normal;
    text-shadow:1px 1px 2px #362c30;
    text-transform:uppercase;
    }/* Blog johanes djogzs.blogspot.com */

    @-webkit-keyframes johanesloader {
    0% {width:0px; opacity:0;}
    2% {width:0px; opacity:1;}
    20% {width:460px; opacity:1;}
    22.5% {width:460px; opacity:0;}
    22.59% {width:0px;}
    25% {width:0px; opacity:1;}
    45% {width:460px; opacity:1;}
    47.5% {width:460px; opacity:0;}
    47.59% {width:0px;}
    50% {width:0px; opacity:1;}
    70% {width:460px; opacity:1;}
    72.5% {width:460px; opacity:0;}
    72.59% {width:0px;}
    75% {width:0px; opacity:1;}
    95% {width:460px; opacity:1;}
    98% {width:460px; opacity:0;}
    100% {width:0px; opacity:0;}
    }
    @-moz-keyframes johanesloader {
    0% {width:0px; opacity:0;}
    2% {width:0px; opacity:1;}
    20% {width:460px; opacity:1;}
    22.5% {width:460px; opacity:0;}
    22.59% {width:0px;}
    25% {width:0px; opacity:1;}
    45% {width:460px; opacity:1;}
    47.5% {width:460px; opacity:0;}
    47.59% {width:0px;}
    50% {width:0px; opacity:1;}
    70% {width:460px; opacity:1;}
    72.5% {width:460px; opacity:0;}
    72.59% {width:0px;}
    75% {width:0px; opacity:1;}
    95% {width:460px; opacity:1;}
    98% {width:460px; opacity:0;}
    100% {width:0px; opacity:0;}
    }
    @-webkit-keyframes fadeOut {
    0% { opacity: 1;top:0px;}
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; -webkit-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -webkit-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }
    @-moz-keyframes fadeOut {
    0% { opacity: 1;top:0px; }
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; -moz-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -moz-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }

    @-o-keyframes fadeOut {
    0% { opacity: 1;top:0px; }
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; -o-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -o-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }

    @-ms-keyframes fadeOut {
    0% { opacity: 1;top:0px;}
    10% { opacity: 1;top:0px;}
    90% { opacity: 1; -ms-transform: translateY(0px);top:0px;}
    99% { opacity: 0; -ms-transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px;}
    }

    @keyframes fadeOut {
    0% { opacity: 1;top:0px; }
    10% { opacity: 1;top:0px; }
    90% { opacity: 1; transform: translateY(0px);top:0px;}
    99% { opacity: 0; transform: translateY(-30px);top:0px;}
    100% { opacity: 0;top: -980px; }
    }

HTML

Sedangkan untuk Kode Html ini diletakan dibawah kode <body>

    <div id='sliderloadingwrapper'><div id='sliderloader'>
    <ul><li><span><h2>Loading Page . . .</h2></span></li></ul>
    <div id='progressbg'><div id='johanesloader'>
    </div></div></div></div>

Oia,jika kamu ingin mengganti warna background dan loadernya,kamu tinggal mencari css dibawah ini,dan mengganti kode warnanya (hex dan rgba)

    #sliderloadingwrapper{

    yang diganti :
    background: rgba(95, 130, 187, 0.2);

    dan

    #sliderloader {

    yang diganti :
    background-color: #8CA5CE;

Menggunakan trik ini,akan berpengaruh pada seluruh postingan blog anda,jika hanya ingin tampil di halaman depan/homepage saja,gunakan html tag conditional yang diletakan di luar html loader ini.

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    Isi HTML
    </b:if>

untuk hasulnya 1000% berhasil

#Trik ini sudah teruji pada browser Google Chrome dan mozilla Firefox versi terbaru.




 SUMBER : http://djogzs.blogspot.com/2013/01/loading-page-dengan-css3-animasi.html