Cara Membuat Preloader Cantik dengan Bootstrap 4

Share:
Cara Membuat Preloader Cantik dengan Bootstrap. Assalamualaikum, halo semuanya kembali lagi di sahretech. Kali ini saya akan berbagi tutorial cara membuat preloader atau spinner cantik di web dengan menggunakan bootstrap. Spinner atau Preloader biasa digunakan agar tampilan web tidak patah-patah saat ditampilkan. Penggunaannya sederhana, spinner akan menghilang saat tampilan web seluruhnya telah dimuat. Dengan menggunakan cara ini, web kita akan terlihat lebih profesional dan meningkatkan kepuasan pengguna

Spinner

Spinner digunakan untuk menunjukkan status pemuatan web kalian. Spinner dibuat dengan menggunakan html dan css, kalian tidak perlu javascript untuk memanggilnya. Tetapi, javascript tetap diperlukan untuk mengubah visibilitasnya. Bootstrap telah menyediakan 2 jenis spinner yang dapat disesuaikan dengan kebutuhan pengguna. Klik tautan berikut ini untuk melihat dokumentasi lengkapnya https://getbootstrap.com/docs/4.4/components/spinners/

2 Jenis spinner itu adalah border spinner dan growing spinner.Border spinner digunakan untuk indikator pemuat halaman yang ringan, berbentuk garis yang  menyerupai lingkaran sempurna dan terus berputar sampai website selesai di load. Lalu ada growing spinner, berbentuk titik yang terus membesar. Keduanya bisa kalian kostumisasi sesuai warna, ukuran dan penempatannya. Ok, langsung saja kita buat spinnernya di bawah ini.





Cara Membuat Spinner dengan Bootstrap

  • 1. Buat halaman baru bernama spinner.html
  • 2. Lalu tambahkan bootstrap CDN di dalamnya, ikuti script di bawah ini

<!DOCTYPE html>
<html>
  <head>
    <title>Preloader</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </head>
  <body>
    <center>
      <div class="jumbotron">
        <h1>Hello Sahretech</h1>
      </div>
    </center>
  </body>
</html>


  • 3. Lalu tambahkan spinner border di bawah tag <body>

<div class="preloader">
    <div class="loading">
    <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
    </div>
    </div>
</div>


  • 4. lalu tambahkan style pada spinner, tambah tag <style></style> di antara tag <head></head>

<style type="text/css">
    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #fff;
    }
    .loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font: 14px arial;
    }
</style>


  • 5. Langkah terakhir tambahkan javascript sebelum </body> fungsinya untuk menghentikan spinner saat dokumen telah dimuat 100%. kalian juga dapat menset durasinya dengan mengganti tulisan "slow" dengan angka 1000 = 1 detik, dan berlaku kelipatannya

<script>
    $(document).ready(function() {
        $(".preloader").fadeOut("slow");
    });
</script>


  • 6. Lalu jalankan, maka tampilannya akan seperti gambar di bawah ini. untuk improvisasi bisa kalian coba-coba sendiri dengan gaya spinner lain.


Berikut coding lengkapnya

<!DOCTYPE html>
<html>
  <head>
    <title>Preloader</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <style type="text/css">
      .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #fff;
      }
      .preloader .loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font: 14px arial;
      }
    </style>
    <script>
        $(window).load(function() {
            $(".preloader").fadeOut("slow");
        });
    </script>
  </head>
<body>
    <div class="preloader">
      <div class="loading">
        <div class="spinner-border" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
    <center>
        <div class="jumbotron">
          <h1>Hello Sahretech</h1>
        </div>
    </center>
  </body>
</html>


Sekian tutorial membuat preloader cantik dengan bootstrap 4. Semoga tutorial singkat ini dapat membantu kalian semua. Kurang lebihnya saya mohon maaf, apabila ada kritik, saran dan pertanyaan silahkan tinggalkan di kolom komentar di bawah ini. Happy coding :)



2 comments:

  1. Terima kasih sharingnya Gan. Izin saya pake script-nya buat salah satu materi di channel Youtube saya ya. Link web ini akan saya insert di kolom deskripsi videonya :)

    ReplyDelete
    Replies
    1. terima kasih atas kunjugannya, dan terima kasih atas bantuannya. Semoga chnanelnya sukses

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi