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.

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