Penanda aras progress bar merupakan elemen kawalan grafik yang digunakan untuk menunjukkan tahap kemajuan proses operasi komputer seperti muat turun, pemindahan fail, atau pemasangan perisian. Adakalanya, penanda aras ini digabungkan dengan paparan teks bagi menggambarkan peratusan kemajuan.

Menerusi perpustakaan terbina dalam Bootstrap, terdapat pelbagai pilihan penanda aras yang boleh dipilih oleh pengatur cara.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

1

2

Semakan

Berdasarkan latihan tadi, kita telah mempelajari kaedah untuk menggunakan pelbagai jenis penanda aras di dalam laman sesawang sesuai dengan keperluan tertentu.

Bagi menghasilkan progress bar asas, anda memerlukan <div> utama yang ditandakan dengan kelas progress, serta <div> susulan yang ditandakan dengan kelas progress-bar.

Menggunakan library terbina dalam, pengatur cara hanya perlu menambah kelas tertentu kepada kelas asas untuk menghasilkan efek yang lebih menarik.

Contohnya, bagi memaparkan penanda aras berwarna hijau, hanya tambah kelas bg-success ke dalam kelas progress-bar.

Untuk menghasilkan penanda aras beranimasi, hanya tambahkan kelas progress-bar-animated ke dalam kelas tadi.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Hasilkan lima striped progress bar dengan warna berbeza.

2. Hasilkan tiga progress bar asas dengan ketinggian berbeza

3. Hasilkan dua progress bar beranimasi dengan kelajuan animasi berbeza.

Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin.

Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!