We come with the latest version 1.6, get this theme through our official site.

Efek Loading Dengan Plugin NProgress dan Event `beforeunload`

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. :)
Unknown

Wow, Awesome tutorial JS, Jquery .... Thank's ! :-bd


kembara Blogger

di cuba ya mas :-bd


Tips Pernikahan

Buju buneng.... kagak ngerti ane gan, koding semua isinya

hahaha


Rizky Kurniawan

hahahaha,
silahkan dipahami lagi gan ^:D

Anonim

Keren nih mas, mas rupanya pintar jQuery ya... :)


Rizky Kurniawan

makasih mas jeniv,
masih dasar sayanya mas :D

Bima A.

Bro Ane Minta Maaf yah =(


Rizky Kurniawan

minta maaf buat apa...?
kamu gak salah ko :D

Shiro

Mau liat Demonya :D


Rizky Kurniawan

Demonya bisa kamu lihat di blog ini. ^o^

Tenbas

Mas, Cara buat Box info dengan style kayak di atas gimana


Rizky Kurniawan

itu pakai style default bootstrap

Tenbas

Komentar di blokir karena mengandung element yang tidak diperbolehkan pada kolom komentar.


Rizky Kurniawan

Komentar di blokir karena mengandung element yang tidak diperbolehkan pada kolom komentar.

Yuk Diskusi

Kalau ada pertanyaan yuk kita diskusikan