کامپوننت های Progress با دو عنصر HTML، مقداری CSS برای تنظیم عرض و چند ویژگی ساخته شده اند. the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

اضافه کردن.progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

گرادیان راه راه نیز می تواند متحرک شود. .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

در صورت نیاز، چندین نوار پیشرفت را در یک جزء پیشرفت قرار دهید.

از کلاس های ابزار پس زمینه برای تغییر ظاهر نوارهای پیشرفت فردی استفاده کنید.

با قرار دادن متن در نوار پیشرفت، برچسب‌ها را به نوارهای پیشرفت خود اضافه کنید.progress-bar.

از کلاس های اصلاح کننده از پیش تعریف شده استفاده کنید.progress-{sm|lg} to change progress element height.

می توانید به صورت دستی a را تنظیم کنیدheight value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.