Assalamu'alaikum W. W.
Abdul Hafid Gunawan - Hai Sobat Setia SC Blog bertemu lagi dengan saya di SC Blog. Bismillah kita mulai cekidot.
PENGERTIAN
SleepingCodings - Progress Bar merupakan sebuah fitur Class di Bootstrap yang di gunakan untuk menunjukkan kepada pengguna sampai mana Proses yang telah tercapai.
LATAR BELAKANG
Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.
MAKSUD DAN TUJUAN
- Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.
- Progress Bar berguna untuk menampilkan menu proses pada sebuah Website.
ALAT DAN BAHAN
Text Editor
PEMBAHASAN
1. PROGRESS BAR
Dalam pemakain Class Progress Bar temen" membuat div parent class .progress, lalu membuat di child dari class .progress yaitu .progres-bar . Progress Bar menggunakan CSS Inline yang berfungsi propertinya width , width ini di gunakan untuk membuat loadingnya, contoh penerapannya :
2. STRIPED PROGRESS BAR
Striped Progress Bar untuk memanipulasi proses loadingnya, menjadi striped / belang - belang. Contoh Penerapannya :
3. COLOR PROGRESS BAR
Color Progress Bar untuk memanipulasi warna dari progress bar loading, kita tinggal memanggil classnya seperti .bg-primary, dlsb. Contoh Penerapannya :
4. PROGRESS BAR ANIMATED
Progress Bar Animated di gunakan untuk memanipulasi Progress Bar agar memiliki animasi tertentu yang telah di sediakan oleh bootstrap, contoh penerapannya :
5. MULTIPLE PROGRESS BAR
Multiple Progress Bar di gunakan untuk membuat beberapa Progress Bar untuk di jadikan satu kedalam satu Class .progress, Contoh Penerapannya :
KESIMPULAN
Penggunaan Progress Bar di Bootstrap sangat mudah dan sangat menghemat waktu dalam pembuatannya, karena kita hanya tinggal memanggil Class yang telah di sediakan oleh Bootstrap, dan penggunaan Progress Bar ini biasanya untuk menu loading di Website contohnya.
REFERENSI
- www.w3schools.com/bootstrap4/bootstrap_progressbars.html
Wassalamu'alaikum W. W.
No comments:
Post a Comment