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



No comments