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

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

hahaha
Reply Delete
hahahaha,
silahkan dipahami lagi gan ^:D
Anonim Maret 10, 2014
Keren nih mas, mas rupanya pintar jQuery ya... :)
Reply Delete
makasih mas jeniv,
masih dasar sayanya mas :D
Bro Ane Minta Maaf yah =(
Reply Delete
minta maaf buat apa...?
kamu gak salah ko :D

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

Posting Komentar

no Spam :)

Cancel Reply