Progressbar / Loading Halaman Web Menggunakan CSS, Javascript

pada saat kita membuat sebuah halaman website dan halaman tersebut memiliki link, pada saat kita klik menu tersebut maka kita akan diarahkan ke link tujuan. dan pada saat proses membuka halaman tujuan, biasanya ditandai dengan adanya proses loading dari browser. yang menandakan bahwa halaman yg ingin ditampilkan sedang dalam proses memuat seluruh konten yang ada dihalaman tersebut.

Pada proses tersebut terkadang terlihat terkadang tidak, tergantung besarnya konten yang akan dibuat, semakin besar konten akan semakin lama proses loadingnya, untuk kali ini kita tidak membahas konapa prosesnya ada yang lama atau ada yg tidak terlihat, tetapi kita mau membahas gimana cara menapilkan proses loading halaman tetapi dengan buatan kita sendiri. ga perlu panjang lebar langsung ikuti langkah-langkah dibawah ini:

1. kode pertama

<script>
document.onreadystatechange = function () {
if (document.readyState === "complete") {
console.log(document.readyState);
document.getElementById("PreLoaderBar").style.display = "none";
}
}
</script>

Selanjutnya ketikkan Kode ini dibawah Kode no 1

<style type="text/css">
  .progress {
  position: relative;
  height: 2px;
  display: block;
  width: 100%;
  background-color: white;
  border-radius: 2px;
  background-clip: padding-box;
  /*margin: 0.5rem 0 1rem 0;*/
overflow: hidden;

 }
  .progress .indeterminate {
  background-color:black; }
  .progress .indeterminate:before {
  content: '';
  position: absolute;
  background-color: #2C67B1;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
  .progress .indeterminate:after {
  content: '';
  position: absolute;
  background-color: #2C67B1;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
animation-delay: 1.15s; }
 @-webkit-keyframes indeterminate {
  0% {
  left: -35%;
  right: 100%; }
  60% {
  left: 100%;
  right: -90%; }
  100% {
  left: 100%;
  right: -90%; } }
  @keyframes indeterminate {
  0% {
  left: -35%;
  right: 100%; }
  60% {
  left: 100%;
  right: -90%; }
  100% {
  left: 100%;
  right: -90%; } }
  @-webkit-keyframes indeterminate-short {
  0% {
  left: -200%;
  right: 100%; }
  60% {
  left: 107%;
  right: -8%; }
  100% {
  left: 107%;
  right: -8%; } }
  @keyframes indeterminate-short {
  0% {
  left: -200%;
  right: 100%; }
  60% {
  left: 107%;
  right: -8%; }
  100% {
  left: 107%;
  right: -8%; } }
</style>

Ok jika sudah lanjut ke Script yang ke 3

<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>

jika semua sudah, silahkan di save dan coba jalankan, jika pada saat anda jalankan seperti tidak ada perubahan apa-apa, silahkan anda masukkan konten yg ukuran besar agar proses load halaman terlihat, misal anda sisipkan gambar dengan resolusi tinggi.

Script diatas sudah dicoba dan berjalan dengan normal. jika ada pertanyaan silahkan tinggalkan pesan dibawah ini.