Efek Loading Dengan Plugin NProgress dan Event `beforeunload`

NProgress

Pada kesempatan kali ini Males Code akan membahas seputar efek loading yang bisa dipasang di web kita sendiri dengan menggunakan plugin NProgress dan event `beforeunload` yang mungkin jauh berbeda dengan tutorial di blog lain.
Plugin NProgress ini ialah sebuah plugin yang diciptakan oleh Rico Sta. Cruz pada proyek Github miliknya dan mengatakan bahwa ia terinpirasi oleh beberapa situs yaitu Google, Youtube, dan Medium.
Sementara beforeunload adalah sebuah event yang terpacu ketika sebuah halaman berpindah karena seorang pengguna mengklik tautan tertentu atau memuat ulang halaman yang memicu mereka untuk keluar dari halaman tersebut. - DTE dan beberapa pengubahan kata.
berikut ialah penampakan dari kode dari beforeunload:

$(window).on("beforeunload", function() {
    // elemen yang akan dipicu
});

dengan menggunakan beforeunload ini animasi yang akan ditampilkan buka karena mengklik sebuah link, melainkan animasi akan tampil ketika halaman berpindah kehalaman lain atau me-reload ulang halaman tersebut.

langsung saja ke inti pembahasan.

Pada plugin ini anda setidaknya sudah memiliki JQuery library v1.10.1 dan kode dibawah ini di blog anda.

<script type='text/javascript' src="//dl.dropboxusercontent.com/s/n03dloq2n31131p/nprogress.min.js"></script>

#nprogress {
  pointer-events: none;
  -webkit-pointer-events: none;
}
#nprogress .bar {
  background: #29d;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 100;
  top: 15px;
  right: 15px;
}
#nprogress .spinner-icon {
  width: 14px;
  height: 14px;
  border:  solid 2px transparent;
  border-top-color:  #29d;
  border-left-color: #29d;
  border-radius: 10px;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  -moz-animation:    nprogress-spinner 400ms linear infinite;
  -ms-animation:     nprogress-spinner 400ms linear infinite;
  -o-animation:      nprogress-spinner 400ms linear infinite;
  animation:         nprogress-spinner 400ms linear infinite;
}
@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
untuk mengganti warna loading, anda bisa mengganti warnanya dengan warna kesukaan anda pada bagian yang saya tandai dengan warna kuning.
$(document).ready(function () {
    NProgress.start();
    $(window).on("beforeunload", function () {
        NProgress.start()
    });
    $(window).bind("load", function () {
        NProgress.done()
    });
});
dan untuk melihat previewnya bisa dilihat seperti blog ini.
Sekian tutorial kali ini, semoga bisa bermanfaat. :)

18 komentar

Siska Erlangga
Wow, Awesome tutorial JS, Jquery .... Thank's ! :-bd
reply Reply delete Delete
Azis White
Buju buneng.... kagak ngerti ane gan, koding semua isinya

hahaha
reply Reply delete Delete
Rizky Kurniawan Ritonga
hahahaha,
silahkan dipahami lagi gan ^:D
Jeniv
Keren nih mas, mas rupanya pintar jQuery ya... :)
reply Reply delete Delete
Rizky Kurniawan Ritonga
makasih mas jeniv,
masih dasar sayanya mas :D
Bmaster Aditama
Bro Ane Minta Maaf yah =(
reply Reply delete Delete
Rizky Kurniawan Ritonga
minta maaf buat apa...?
kamu gak salah ko :D

Rizky Kurniawan Ritonga
Demonya bisa kamu lihat di blog ini. ^o^
Ashock Devil
Mas, Cara buat Box info dengan style kayak di atas gimana
reply Reply delete Delete
Rizky Kurniawan Ritonga
itu pakai style default bootstrap
Ashock Devil
iya itu pake Font awesome.Boostrap tapi caranya Mas
reply Reply delete Delete
Rizky Kurniawan Ritonga
Sudah ada nih cara pemasangannya [url=http://malescode.blogspot.com/2014/05/pure-css3-info-box.html]disini[/url]

Posting Komentar

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Cancel Reply