7 Animasi Pre-Loader Keren dengan CSS3

Discussion in 'HTML & Website Design' started by Syakir Rahman, Jan 16, 2015.

Page 1 of 2
  1. Syakir Rahman

    Syakir Rahman Member

    Joined:
    Jan 9, 2015
    Messages:
    24
    Likes Received:
    1
    Trophy Points:
    8
    Halo kawan-kawan bersosialers, pada trit ini saya akan berbagi 7 animasi preloader yang dibuat dengan css3 untuk dipake di blog. Animasi pre-loading ini sangat bermanfaat untuk membuat website atau blog kita lebih keren dan menarik.

    [​IMG]

    Seperti yang kawan-kawan lihat di gambar di atas, pre-loadingnya bergaya flat. Untuk ketujuh demo dan kode selengkapnya silahkan lihat disini :

    http://jsfiddle.net/syakirurahman/w24obewd/

    http://jsfiddle.net/syakirurahman/reLp4eus/

    http://jsfiddle.net/syakirurahman/kbe3fdc2/

    http://jsfiddle.net/syakirurahman/ph881zg2/

    http://jsfiddle.net/syakirurahman/u6z9kb4s/

    http://jsfiddle.net/syakirurahman/mjzkx6bb/

    http://jsfiddle.net/syakirurahman/jtv48458/

    Pada demo di atas, saya membuatnya hanya support untuk browser chrome dan browser lain yang versinya sudah tinggi. Jadi, jika tidak berjalan pada browser anda, cobalah untuk mengupdate atau mengganti browser kawan-kawan. Selengkapnya mengenai cross browser animasi CSS, bisa baca di sini :

    Mengenal Animasi CSS3

    Jika sobat ingin mendownload semua animasi diatas, silahkan Klik link dibawah ini :

    Download

    Cara Menambahkan Animasi Pre-loader pada Blogger/Blogspot
    Untuk menampilkan animasi loading ini pada blog anda, silahkan ikuti langkah-langkah dibawah :

    1. Pilih salah satu style dari 7 pilihan di atas yang anda sukai. Kode CSS dan HTML-nya di copy karena akan dipakai di langkah selanjutnya.

    2. Login ke Blogger Dashboard > Pilih Blog > Template > Edit HTML.

    3. Pada kolom edit html, lalu tempatkan kode css preloader yang anda pilih diatas kode */]]></b:skin>

    4. Untuk Kode HTML-nya, tempatkan tepat dibawah tag <body>.

    5. Lalu, tambahkan script dibawah ini tepat diatas tag </head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    $(window).load(function() { $(".preload-wrapper").fadeOut("slow"); })
    </script>
    Keterangan Kode:

    - Script diatas adalah untuk memanggil dan menggunakan jquery. Fungsinya adalah agar animasi pre-loader hanya muncul saat halaman sedang di load, dan hilang ketika seluruh halaman sudah di load.

    - Kode Yang berwarna merah digunakan untuk memanggil library jquery. Kebanyakan template blog biasanya sudah dilengkapi jquery. Jadi, hanya sertakan kode tersebut jika template anda belum menggunakan library jquery tersebut. Cek terlebih dahulu apakah preloader jalan atau tidak tanpa kode tersebut. Jika berjalan, maka anda tidak perlu menambahkan kode merah tersebut.

    6. Terakhir, jangan lupa di save pengeditan template anda.

    Cara Menambahkan Animasi Pre-loader pada Wordpress Self Hosted
    Pengguna Wordpress Self hosted juga bisa menggunakan animasi preloader ini. Sebenarnya, semua website juga bisa, tetapi disini saya hanya akan membahas yang paling umum saja. Untuk menambahkan animasi CSS3 preloader ini ke situs wordpress anda, silahkan ikuti langkah-langkah berikut ini :

    1. Login ke Dashboard > Pilih menu Appearance > Editor. Pastikan bahwa direktori atau file tema anda sudah disetting permissionnya agar bisa di edit.

    2. Pilih file "Stylesheet" (style.css), lalu tambahkan kode css animasi preloader yang anda pilih di bagian paling bawah. Klik Save.

    3. Pilih File "Header" (header.php), lalu tambahkan kode html animasi preloader yang anda pilih tepat dibawah tag <body>.

    4. Masih pada file header.php, tambahkan juga script dibawah ini tepat diatas tag </head>:

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
    $(window).load(function() { $(".preload-wrapper").fadeOut("slow"); })
    </script>
    Keterangan kode sama dengan keterangan pada panambahan preloader di blogspot di atas

    5. Klik Save.

    Yap, selesai. Silahkan dicoba.
    semoga bermanfaat..

    Sumber : http://www.syakirurohman.net/2015/01/cara-membuat-animasi-loading-website.html
     
    Last edited: Jan 16, 2015
    Syakir Rahman, Jan 16, 2015
    #1
  2. Ardilas

    Ardilas Super Level

    Joined:
    Feb 18, 2013
    Messages:
    4,243
    Likes Received:
    317
    Trophy Points:
    83
    Google+:
    Cakep animasinya. Untuk sekarang belum dibutuhkan, mungkin kedepannya lagi.
     
    Ardilas, Jan 16, 2015
    #2
  3. Syakir Rahman

    Syakir Rahman Member

    Joined:
    Jan 9, 2015
    Messages:
    24
    Likes Received:
    1
    Trophy Points:
    8
    Yap.. di bookmark dulu aja sob :D
     
    Syakir Rahman, Jan 16, 2015
    #3
  4. sebeningembun

    sebeningembun Member

    Joined:
    Dec 21, 2014
    Messages:
    74
    Likes Received:
    8
    Trophy Points:
    8
    keren..
     
    sebeningembun, Jan 16, 2015
    #4
  5. riki 21

    riki 21 Member

    Joined:
    Oct 21, 2014
    Messages:
    254
    Likes Received:
    25
    Trophy Points:
    28
    Google+:
    keren animasynya, di bookmark dulu
     
    riki 21, Jan 16, 2015
    #5
  6. Grant Verleend

    Grant Verleend Active Member

    Joined:
    Sep 10, 2014
    Messages:
    1,234
    Likes Received:
    35
    Trophy Points:
    48
    Google+:
    Bagus nie, simpen dulu linknya.
     
    Grant Verleend, Jan 16, 2015
    #6
  7. pram

    pram Well-Known Member

    Joined:
    Sep 23, 2013
    Messages:
    3,099
    Likes Received:
    161
    Trophy Points:
    63
    Google+:
    Bagus juga animasinya, tapi kalau saya kurang tertarik yang beginian, biar loading blog makin cepet :D
     
    pram, Jan 16, 2015
    #7
  8. Muhammad Amin

    Muhammad Amin Member

    Joined:
    Jul 18, 2014
    Messages:
    255
    Likes Received:
    17
    Trophy Points:
    18
    Lumayan buat mempercantik tampilan blog :)
     
    Muhammad Amin, Jan 16, 2015
    #8
  9. Yofan Purnama

    Yofan Purnama New Member

    Joined:
    Jan 8, 2015
    Messages:
    14
    Likes Received:
    0
    Trophy Points:
    1
    Boleh Juga Animasi nya Gan..
     
    Yofan Purnama, Jan 17, 2015
    #9
  10. SmoothGenie Clothing

    SmoothGenie Clothing New Member

    Joined:
    Jan 17, 2015
    Messages:
    3
    Likes Received:
    0
    Trophy Points:
    1
    Google+:
    keren,,, ane coba dlu bozz...
     
    SmoothGenie Clothing, Jan 17, 2015
    #10
  11. khoirun naim

    khoirun naim New Member

    Joined:
    Dec 21, 2014
    Messages:
    16
    Likes Received:
    0
    Trophy Points:
    1
    gan ini bikin blog berat gak :eek:
     
    khoirun naim, Jan 18, 2015
    #11
  12. Yusuf.S

    Yusuf.S Well-Known Member

    Joined:
    May 4, 2014
    Messages:
    1,155
    Likes Received:
    100
    Trophy Points:
    63
    Google+:
    pake javascript yahh,, kalo pake java script saya ga mau ahh, nanti loadingnya keren tapi lama
     
    Yusuf.S, Jan 18, 2015
    #12
  13. umiceri

    umiceri New Member

    Joined:
    Nov 6, 2014
    Messages:
    12
    Likes Received:
    0
    Trophy Points:
    1
    bagus bagus animvsinya
     
    umiceri, Jan 18, 2015
    #13
  14. ayahnyanadia

    ayahnyanadia Well-Known Member

    Joined:
    Apr 4, 2013
    Messages:
    1,369
    Likes Received:
    153
    Trophy Points:
    63
    Google+:
    7 Animasi Pre-Loader Keren dengan CSS3, mantap banyak banget...
     
    ayahnyanadia, Jan 19, 2015
    #14
  15. Syakir Rahman

    Syakir Rahman Member

    Joined:
    Jan 9, 2015
    Messages:
    24
    Likes Received:
    1
    Trophy Points:
    8
    Iya memang pake javascript gan, tepatnya jquery.. Kalo di blog agan sudah memasang jquery, maka animasi ini tidak akan memberatkan.. soalnya kalo loadingnya itu pake css3, jquerynya hanya sebagai pelengkap/pengaturnya saja.. Tapi kalo blog agan emang udah prinsip ga bakal di pakein javascript/jquery, menambahkan jquery ke blog memang bisa bikin loading lama, tapi bukan karena animasi di atas, melainkan karena library jquerynya
     
    Syakir Rahman, Jan 19, 2015
    #15
  16. Imron Sulaeman Kodih

    Imron Sulaeman Kodih Member

    Joined:
    Jan 12, 2015
    Messages:
    24
    Likes Received:
    4
    Trophy Points:
    8
    keren banget gan animasinya
     
    Imron Sulaeman Kodih, Jan 19, 2015
    #16
  17. amin28

    amin28 Member

    Joined:
    Dec 30, 2014
    Messages:
    112
    Likes Received:
    1
    Trophy Points:
    18
    yang mau ngedit blognya, sebaiknya di backup dulu
     
    amin28, Jan 19, 2015
    #17
  18. Muhammad Rauuf

    Muhammad Rauuf Member

    Joined:
    Jan 4, 2015
    Messages:
    54
    Likes Received:
    2
    Trophy Points:
    8
    hahaha baru tau saya cara kerja jquery kaya gitu :D . btw animasinya keren-keren gan
     
    Muhammad Rauuf, Jan 20, 2015
    #18
  19. Ilbal Crew

    Ilbal Crew Member

    Joined:
    Jul 13, 2014
    Messages:
    48
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    top sekali gan animasinya , :D
     
    Ilbal Crew, Jan 21, 2015
    #19
  20. mipacko

    mipacko Member

    Joined:
    Nov 27, 2014
    Messages:
    28
    Likes Received:
    1
    Trophy Points:
    8
    Google+:
    wow bagus nih,, bookmark dulu gan *bagus*
     
    mipacko, Jan 21, 2015
    #20
Page 1 of 2
Loading...
Similar Threads - Animasi Loader Keren
  1. Virlyz82

    Membuat Awesome Menu Animasi Toggle

    Virlyz82, Aug 15, 2015, in forum: HTML & Website Design
    Replies:
    0
    Views:
    1,264
    Virlyz82
    Aug 15, 2015
  2. Virlyz82

    Flat UI Menu Animasi Drop Down CSS3

    Virlyz82, Aug 24, 2014, in forum: HTML & Website Design
    Replies:
    3
    Views:
    1,412
    asli3rut
    Sep 18, 2014
  3. Virlyz82

    Efek Toggle Animasi Dengan Jquery UI

    Virlyz82, Feb 17, 2014, in forum: HTML & Website Design
    Replies:
    8
    Views:
    1,696
    Virlyz82
    Mar 3, 2014

Share This Page