Bootstrap - Spinners
Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan mempelajari dunia yang menarik dari Bootstrap spinners. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu Anda dalam perjalanan ini, langkah demi langkah. Jadi, ambil minuman kesukaan Anda, duduk nyaman, dan mari kita mulai belajar tentang spinners ini!
Cara Kerjanya
Spinners di Bootstrap digunakan untuk menunjukkan status memuat dalam aplikasi web Anda. Mereka seperti itu putar kecil yang Anda lihat saat sebuah website sedang memuat konten. Komponen ini membantu meningkatkan pengalaman pengguna dengan menyediakan umpan balik visual bahwa ada sesuatu yang terjadi di belakang layar.
Bootstrap spinners dibangun dengan HTML, CSS, dan sedikit magi JavaScript. Mereka menggunakan CSS khusus untuk menciptakan animasi putar, memastikan penampilan yang mulus dan konsisten di berbagai browser dan perangkat.
Spinner Batas
Mari kita mulai dengan spinner yang paling dasar: spinner batas. Ini adalah gaya spinner default di Bootstrap.
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Dalam contoh ini, kita memiliki elemen div dengan dua kelas: spinner-border dan role="status". Kelas spinner-border menerapkan animasi putar, sedangkan role="status" membantu pembaca layar tampilan memahami bahwa ini adalah indikator status.
Dalam div, kita memiliki span dengan kelas visually-hidden. Teks ini tidak terlihat di layar tapi dapat dibaca oleh pembaca layar tampilan, meningkatkan aksesibilitas bagi pengguna dengan gangguan visual.
Warna
Seperti kameleon yang berubah warna, spinners kita juga dapat menyesuaikan warna untuk tema yang berbeda! Bootstrap memungkinkan Anda untuk menyesuaikan warna spinners Anda menggunakan utilitas warna teks.
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Setiap spinner dalam contoh ini memiliki kelas tambahan seperti text-primary, text-secondary, dll. Kelas-kelas ini mengubah warna spinner untuk mencocokkan skema warna Bootstrap.
Spinner Tumbuh
Jika spinner batas bukan pilihan Anda, Bootstrap menawarkan rasa lain: spinner tumbuh. Spinner ini tumbuh dan menyusut instead of berputar.
<div class="spinner-grow" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Strukturnya mirip dengan spinner batas, tapi kita menggunakan kelas spinner-grow instead of spinner-border.
Penjajaran
Menjajaran spinners adalah hal yang mudah seperti kue dengan utilitas flexbox Bootstrap. Mari kita lihat beberapa contoh:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Memuat...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>Dalam contoh pertama, kita menggunakan justify-content-center untuk menengahkan spinner secara horisontal. Dalam yang kedua, kita menjajaran spinner secara vertikal dengan beberapa teks menggunakan align-items-center.
Margin
Butuh ruang di sekitar spinner Anda? Utilitas margin Bootstrap datang untuk menyelamatkan!
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Kelas m-5 menambahkan margin ukuran 5 (yang biasanya adalah 3rem) di sekitar semua sisi spinner.
Penempatan
Spinners dapat ditempatkan dalam berbagai elemen lain. Ini adalah cara Anda dapat menempatkan spinner di dalam tombol:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Memuat...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Memuat...
</button>Dalam contoh ini, kita menempatkan spinner di dalam tombol dan menggunakan spinner-border-sm untuk membuatnya lebih kecil.
Flex
Utilitas Flexbox dapat membantu Anda menciptakan tata letak yang lebih kompleks dengan spinners:
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>Ini menengahkan spinner secara horisontal di dalam wadahnya.
Float
Untuk saat Anda memerlukan spinner untuk terapung, utilitas float Bootstrap ada untuk membantu:
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>Kelas float-end membuat spinner terapung ke kanan wadahnya.
Penjajaran Teks
Utilitas penjajaran teks juga dapat digunakan dengan spinners:
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
</div>Ini menengahkan spinner di dalam wadahnya menggunakan penjajaran teks.
Ukuran
kadang-kadang, ukuran benar-benar penting! Anda dapat menyesuaikan ukuran spinners Anda menggunakan kelas sizing Bootstrap:
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Memuat...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Memuat...</span>
</div>Gunakan spinner-border-sm atau spinner-grow-sm untuk spinners yang lebih kecil. Untuk ukuran khusus, Anda dapat menggunakan gaya inline untuk menentukan dimensi tertentu.
Tombol
Akhirnya, mari kita lihat bagaimana menggunakan spinners di dalam tombol:
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Memuat...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Memuat...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Memuat...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Memuat...
</button>Contoh ini menunjukkan bagaimana mencampurkan kedua border dan growing spinners ke dalam tombol, dengan dan tanpa teks pendamping.
Dan itu adalah dia, teman-teman! Anda sekarang ahli spinner Bootstrap. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba komponen ini dalam proyek Anda. Selamat coding, dan semoga halaman web Anda selalu berputar dengan gaya!
Credits: Image by storyset