Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

نوار وضعیت اصلی

نوار وضعیت با برچسب

Add labels to your progress bars by placing text within the .progress-bar.

25%
50%
75%
100%

نوار وضعیت اصلی با متفاوت. زمینه

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

برچسب وضعیت نوار با متفاوت. زمینه

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

10%
25%
50%
75%
100%

نوار وضعیت با میله های متعدد

در صورت نیاز به میله های چندگانه ، چندین نوار پیشرفت را در یک جزء پیشرفت درج کنید.

20%
35%
40%
15%
25%
30%
20%
20%
50%
15%
25%
30%

نوار وضعیت راه

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

10%
25%
50%
75%
100%

نوارهای متحرک نوار وضعیت

The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

10%
25%
50%
75%
100%

عرض نوار وضعیت بر اساس کلاس

Bootstrap provides a handful of utilities for setting width.

10%
25%
50%
75%
100%