প্রোগ্রেস বার ব্যবহার করা হয় যাতে সহজে বোঝা যায় ইউজার এর কাজের প্রক্রিয়া কতদুর সম্মন্ন হয়েছে। Bootstrap এ কয়েক ধরনের প্রোগ্রেস বার লক্ষ্য করা যায়। আমরা যদি একটি উদাহরণ দেখি। একটি ডিফল্ট প্রোগ্রেস বার দেখার জন্য .progress class <div> এর মধ্যে যুক্ত করতে হবে। এরপর ব্রাউজার এ রান করলে একটি নিল বার আমরা পাব। যা ৭০% পর্যন্ত লক্ষ্য করা যাবে।
কোড :
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div>
লেবেল সহকারে প্রসেস বার
লেবেল সহ প্রসেস বার দেখার জন্য কোড থেকে .sr-only class টি মুছে দিতে হবে।
রঙীন প্রোগ্রেস বার
এখন আমরা একটি উদাহরন এর মাধ্যমে বিভিন্ন কালার এর প্রোগ্রেস বার ব্যবহার করব।
প্রোগ্রেস বার এর সাথে contextual classes গুলো হল
.progress-bar-success(সবুজ কালার).progress-bar-info(নিল কালার).progress-bar-warning(অরেঞ্জ কালার).progress-bar-danger(লাল কালার)
কোড
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) </div> </div>
Stripe প্রোগ্রেস বার
প্রোগ্রেস বারের সাথে stripe যোগ করতে চাইলে .progress-bar-striped ক্লাস যোগ করতে হবে
কোড :
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% Complete (success) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%"> 50% Complete (info) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%"> 60% Complete (warning) </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% Complete (danger) </div> </div>
Animated প্রোগ্রেস বার
Animated প্রোগ্রেস বার পেতে চাইলে .active ক্লাস অ্যাড করতে হবে
কোড :
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% </div> </div>
Stacked প্রোগ্রেস বার
বিভিন্ন কালার এর stacked প্রোগ্রেস বার এর জন্য কোড নিম্মরুপ
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"> Free Space </div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%"> Warning </div> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"> Danger </div> </div>
