GagakTekno

Cara Membuat Animasi Loading Seperti Idntheme

Jika sobat pernah berkunjung ke salah satu situs penyedia template gratis seperti Idntheme pastinya sobat akan melihat animasi loading terlebih dahulu sebelum halaman termuat semua dan ini juga dapat membuat tampilan terlihat rapih. Mungkin animasi yang seperti ini dapat membuat blog agak lama termuat karena bisa saja hal ini disebabkan karena template yang cukup berat dan juga tidak ingin para pengunjung melihat blognya terlihat berantakan akan tetapi dengan menambahkan animasi pengunjung dapat menunggu sebentar untuk masuk ke blog tersebut agar tampilan terlihat lebih rapih dan tidak berantakan.

Setiap animasi loading memang banyak sekali yang berbeda-beda seperti halnya pada beberapa blog atau situs yang menggunakan animasi preloader dengan css tapi fungsinya sama saja untuk membuat blog terlihat rapih dan bagus.

Untuk kali ini saya akan membahas animasi yang digunakan oleh Idntheme, bagi sobat yang sering berkunjung ke penyedia template tersebut pastinya akan melihat suasana yang berbeda dengan tampilan yang sebelum di rubah ke yang sekarang dan terlihat bagus.

Lantas bagaimana untuk menerapkan animasi loading tersebut? tentu saja kita akan menggunakan yang namanya CSS Preloader untuk penerapan pada blog kita dan juga dengan animasi ini dapat membuat blog lebih bagus dan kece sekali.

Cara Membuat Animasi Loading

  1. Pertama masuk ke bagian Dashboard blog sobat
  2. Selanjutnya Klik Tema > Klik Edit HTML
  3. Langkah berikutnya sobat cari kode berikut ]]></b:skin> atau </style> dan tambahkan kode dibawah ini sebelum kode diatas
  4. /* Preloader */
    #preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
    @keyframes preload-show-1{from{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-hide-1{to{transform:rotateZ(60deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-cycle-1{5%{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}10%,75%{transform:rotateZ(60deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}80%,100%{transform:rotateZ(60deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-show-2{from{transform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-hide-2{to{transform:rotateZ(120deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-cycle-2{10%{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}15%,70%{transform:rotateZ(120deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}75%,100%{transform:rotateZ(120deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-show-3{from{transform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-hide-3{to{transform:rotateZ(180deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-cycle-3{15%{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}20%,65%{transform:rotateZ(180deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}70%,100%{transform:rotateZ(180deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-show-4{from{transform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-hide-4{to{transform:rotateZ(240deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-cycle-4{20%{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}25%,60%{transform:rotateZ(240deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}65%,100%{transform:rotateZ(240deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-show-5{from{transform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-hide-5{to{transform:rotateZ(300deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-cycle-5{25%{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}30%,55%{transform:rotateZ(300deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}60%,100%{transform:rotateZ(300deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-show-6{from{transform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-hide-6{to{transform:rotateZ(360deg) rotateY(-90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-cycle-6{30%{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}35%,50%{transform:rotateZ(360deg) rotateY(0) rotateX(0deg);border-left-color:#f7484e}55%,100%{transform:rotateZ(360deg) rotateY(90deg) rotateX(0deg);border-left-color:#9c2f2f}}
    @keyframes preload-flip{0%{transform:rotateY(0deg) rotateZ(-60deg)}100%{transform:rotateY(360deg) rotateZ(-60deg)}}
    .preloader{position:absolute;top:50%;left:50%;font-size:20px;display:block;width:3.75em;height:4.25em;margin-left:-1.875em;margin-top:-2.125em;transform-origin:center center;transform:rotateY(180deg) rotateZ(-60deg)}
    .preloader .slice{border-top:1.125em solid transparent;border-right:none;border-bottom:1em solid transparent;border-left:1.875em solid #f7484e;position:absolute;top:0;left:50%;transform-origin:left bottom;border-radius:3px 3px 0 0}
    .preloader .slice:nth-child(1){transform:rotateZ(60deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.82s preload-hide-1 both 1}
    .preloader .slice:nth-child(2){transform:rotateZ(120deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.74s preload-hide-2 both 1}
    .preloader .slice:nth-child(3){transform:rotateZ(180deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.66s preload-hide-3 both 1}
    .preloader .slice:nth-child(4){transform:rotateZ(240deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.58s preload-hide-4 both 1}
    .preloader .slice:nth-child(5){transform:rotateZ(300deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.5s preload-hide-5 both 1}
    .preloader .slice:nth-child(6){transform:rotateZ(360deg) rotateY(0deg) rotateX(0);animation:0.15s linear 0.42s preload-hide-6 both 1}
    .preloader.loading{animation:2s preload-flip steps(2) infinite both}
    .preloader.loading .slice:nth-child(1){transform:rotateZ(60deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-1 linear infinite both}
    .preloader.loading .slice:nth-child(2){transform:rotateZ(120deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-2 linear infinite both}
    .preloader.loading .slice:nth-child(3){transform:rotateZ(180deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-3 linear infinite both}
    .preloader.loading .slice:nth-child(4){transform:rotateZ(240deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-4 linear infinite both}
    .preloader.loading .slice:nth-child(5){transform:rotateZ(300deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-5 linear infinite both}
    .preloader.loading .slice:nth-child(6){transform:rotateZ(360deg) rotateY(90deg) rotateX(0);animation:2s preload-cycle-6 linear infinite both}
  5. Langkah terakhir sobat cari kode <body> lalu tambahkan kode dibawah ini dibawah kode tersebut
  6. <div id='preloader'>
    <div class='preloader loading spinner'>
    <span class='slice'></span>
    <span class='slice'></span>
    <span class='slice'></span>
    <span class='slice'></span>
    <span class='slice'></span>
    <span class='slice'></span>
    </div>
    </div>
  7. Lalu simpan tema/template
Setelah berhasil, sekarang sobat cek tampilan animasi loadingnya di blog sobat apa sudah tampil atau tidak diblog sobat. Untuk sedikit tambahan agar tampilan animasinya hanya tampil dibagian Homepage saja sobat tambahkan kode berikut :

<b:if cond='data:view.isHomepage'>....</b:if>

Maka hasilnya akan terlihat seperti ini

<b:if cond='data:view.isHomepage'>
<div id='preloader'>
<div class='preloader loading spinner'>
<span class='slice'></span>
<span class='slice'></span>
<span class='slice'></span>
<span class='slice'></span>
<span class='slice'></span>
<span class='slice'></span>
</div>
</div>
</b:if>

Setelah menambahkan kode diatas maka tampilan animasi hanya akan tampil dibagian Homepage saja dan dibagian lain tidak akan tampil.

Demo tampilan animasi :

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR