Bootstrap Progress Bar, Pagination (VA)

Kali ini kita akan membahas bootstrap progress bar dan juga pagination. Untuk tutorial pertama kita akan bahas progress bar. Tentu saja kita semua tau apa itu progress baru bukan? Bagi yang tidak tau saya akan memberi gambarnya yaitu :

Sebuah progress bar dapat digunakan untuk menunjukkan pengguna seberapa jauh ia / dia dalam proses.

Bootstrap menyediakan beberapa jenis bar kemajuan.

Untuk membuat kemajuan bar default, menambahkan .progress kelas ke <div>elemen:

Hasilnya :

Sedangkan jika kita ingin mengetahui sudah berapa percent jalannya progress ini kita dapat menampilkan berapa percent seperti :

Maka hasilnya :

Colored Progress Bars

kelas kontekstual digunakan untuk memberikan "makna melalui warna".
Kelas yang kontekstual yang dapat digunakan dengan kemajuan bar:

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

Adalah untuk mengubah warna dari progress bar tegantung dari statusnya. Jika sudah success maka akan berwarna hijau, sedangkan biru untuk info, orange untuk warning dan merah untuk danger. 

Ada juga yang dikenal sebagai .progress-bar-striped sehingga ada effect seperti garis-garis di progress bar tersebut. 

Ada juga yang dikenal Animated Progress Bar yaitu progress bar yang dapat memberi effect, biasanya digabungkan dengan .progress-bar-striped sehingga menimbulkan effect yaitu garis-garis tersebut bergerak.

Ada juga Stacked Progress Bar yang adalah progress bar yang dapat digabungkan. Contoh :

Maka outputnya adalah :

Pagination

Jika Anda memiliki situs web dengan banyak halaman, Anda mungkin ingin menambahkan beberapa jenis pagination untuk setiap halaman.

Ini digunakan untuk pindah ke halaman lainnya contoh nya :

Untuk membuat pagination dasar, menambahkan .paginationkelas ke <ul>elemen:

Maka hasilnya :

Ada juga yang dikenal dengan Active State contohnya :

Hasilnya adalah :

Ada juga yang Disable State yang dimana ketika kita arahkan ke salah satu nya sesuai yang diinginkan maka akan muncul icon stop , setelah itu ada juga Pagination sizing yang dapat mengatur pagination block nya ingin ukuran kecil atau besar dengan .pagination-lg untuk ukuran besar dan .pagination-sm untuk ukuran kecil. Ada juga yang disebut Breadcrumbs.

Thankyou for reading :)
Semoga bermanfaat and God Bless you.