Tutorial Belajar Bootstrap Bagian 25 : Cara Membuat Spinner di Bootstrap

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 24 : Cara Membuat Progress Bar di Bootstrap, selanjutnya kita akan belajar cara membuat spinner di Bootstrap.

Bootstrap 4 memperkenalkan komponen spinner baru yang dapat digunakan untuk menunjukkan status indikator loading dalam proyek Anda.

Spinner biasanya memuat ikon dan dibuat hanya dengan HTML dan CSS. Namun, Anda memerlukan beberapa JavaScript khusus untuk menampilkan atau menyembunyikannya di halaman web.

Selain itu, Anda dapat dengan mudah menyesuaikan tampilan, penyelarasan, dan ukuran spinner dengan class utilitas yang telah ditentukan sebelumnya.

Sekarang, mari kita lihat cara membuatnya.

Untuk membuat indikator spinner atau indikator loading, Anda dapat menggunakan class .spinner-border:

    <div class="spinner-border">
        <span class="sr-only">Loading...</span>
    </div>

Class khusus .sr-only menyembunyikan elemen ke semua perangkat kecuali sreen readers.

Membuat Colored Spinner

Anda dapat menggunakan class warna teks untuk menyesuaikan warna spinner.

     <div class="spinner-border text-primary">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-secondary">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-success">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-danger">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-warning">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-info">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-dark">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-border text-light">
        <span class="sr-only">Loading...</span>
    </div>

Membuat Growing Spinner

Anda juga dapat membuat growing spinner yang tumbuh dan memudar berulang kali, seperti ini:

   <div class="spinner-grow">
        <span class="sr-only">Loading...</span>
    </div>

Demikian pula, seperti border spinner, Anda juga dapat menyesuaikan warna spinner yang sedang tumbuh menggunakan class warna teks, seperti yang ditunjukkan pada contoh berikut:

<div class="spinner-grow text-primary">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-secondary">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-success">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-danger">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-warning">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-info">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-light">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow text-dark">
        <span class="sr-only">Loading...</span>
    </div>

Ukuran Spinner

Anda dapat menggunakan class .spinner-border-sm dan .spinner-grow-sm untuk membuat spinner yang lebih kecil yang dapat dengan cepat digunakan dalam komponen lain seperti tombol.

    <div class="spinner-border spinner-border-sm">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow spinner-grow-sm">
        <span class="sr-only">Loading...</span>
    </div>

Atau, Anda dapat menggunakan kustom CSS atau inline style untuk mengubah ukuran sesuai kebutuhan.

<div class="spinner-border" style="width: 40px; height: 40px;">
        <span class="sr-only">Loading...</span>
    </div>
    <div class="spinner-grow" style="width: 40px; height: 40px;">
        <span class="sr-only">Loading...</span>
</div>

Menggunakan Spinner dalam Tombol

Anda juga dapat menggunakan spinner di dalam tombol untuk menunjukkan tindakan yang sedang diproses atau sedang berlangsung.

Berikut adalah contoh membuat spinner di dalam tombol yang dinonaktifkan.

    <!-- Border spinner di dalam tombol-->
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        <span class="sr-only">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading...
    </button>	
    <!-- Growing spinner di dalam tombol -->
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        <span class="sr-only">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading...
    </button>

Penjajaran Spinner

Anda dapat dengan mudah menyelaraskan spinner ke kiri, kanan, atau tengah menggunakan class utilitas flexbox, float, atau perataan teks. Cobalah contoh berikut untuk melihat cara kerjanya:

<!-- Default rata kiri -->
    <div>
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <hr />

    <!-- Rata tengah menggunakan flex -->
    <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <hr />

    <!-- Rata tengah menggunakan text alignment -->
    <div class="text-center">
        <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <hr />
    
    <!-- Rata kanan menggunakan float -->
    <div class="clearfix">
        <div class="spinner-border float-right" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>

Semoga tutorial ini bisa membantu Anda belajar cara membuat spinner di Bootstrap.

Artikel Lainnya

Tags:

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

0