Skip to main content

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
Labels:

Comments

Post a Comment

Popular posts from this blog

Blog Wilkipedia

Blog merupakan singkatan dari web log[1] adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internetsesuai dengan topik dan tujuan dari si pengguna blog tersebut. 1.Sejarah Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh Pyra Labs sebelum akhirnya PyraLab diakusisi olehGoogle.Com pada akhir tahun 2002 yang lalu. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada perkembangan para penulis blog tersebut. Blog mempunyai fungsi yang sangat beragam,dari sebuah catatan harian, media publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan perusahaan-perusahaan. Sebagian blog dipelihara...
Post a Comment
Read more

Tips Cara Mengoptimalkan Kinerja Komputer

Di sini adalah beberapa tool optimasi PC yang dilengkapi dengan sistem operasi Windows untuk meningkatkan kinerja komputer Anda. 1. Menghapus file-file sementara dari komputer Anda: - Nama utility: Disk Cleanup - Deskripsi: Ketika Anda menjelajah Internet atau bekerja pada aplikasi apapun PC anda secara otomatis menyimpan sebagian dari file-file sementara di folder standar yang ditetapkan untuk tujuan ini. File-file sementara banyak memakan memori komputer sehingga membuat sistem anda melambat. Anda dapat menghapus file-file sementara setelah menutup aplikasi atau dengan menggunakan “Disk Cleanup”utilitas yang disediakan pada Windows XP. 2. Defragment semua data yang tersimpan pada hard disk: - Nama utilitas: Disk Defragmenter - Deskripsi : Fragmented file adalah konsumen besar memori sistem. Dalam kasus ini, data yang disimpan pada hard disk dalam bentuk terfragmentasi maka akan mengambil sebagian besar memori komputer Anda. Oleh karena itu, cara terbaik adalah dengan defra...
2 comments
Read more

perusahaan di balik e-ktp

Proyek e-KTP di Indonesia adalah salah satu implementasi identitas elektronik terbesar di dunia. Menurut NXP Semiconductors, ada sekitar 172 juta chip yang dipasok untuk proyek ini. NXP, sebuah perusahaan yang bermarkas di Belanda, adalah salah satu perusahaan yang memasok teknologi untuk penerapan e-KTP di Tanah Air. Perusahaan itu tergabung bersama pemasok lain dan perusahaan dalam negeri dalam konsorsium Percetakan Negara Republik Indonesia (PNRI). Seperti apa peranan NXP? Dalam keterangan tertulisnya, NXP menyebutkan telah menyediakan sistem mikrokontroler aman dan Secure Application Modules (SAM) tertanam serta pembaca Integrated Chips (IC). Teknologi yang disediakannya itu berperan dalam keamanan serta interoperabilitas sistem e-KTP. Phil Sealy, analis industri dari ABI Research menganggap konsorsium PNRI telah bekerja sesuai jadwal dalam menyelenggarakan proyek e-KTP tersebut. "Di masa yang akan datang, ABI Research berharap pemerintah Indonesia bisa lebih ...
Post a Comment
Read more