کامپوننت های پراگرس از المان های اچ تی ام ال و از سی اس ها برای تنظیم عرض و برخی از ویژگی ها استفاده می کنند. ما از المان های <progress> در (HTML5) استفاده نمی‌کنیم. اما تضمین می کنیم که می توانید نوارهای پیشرفت را روی هم قرار دهید، آنها را متحرک کنید و برچسب های متنی را روی آنها قرار دهید.

• ما از .progress به عنوان بسته بندی برای نشان دادن حداکثر مقدار نوار پیشرفت استفاده می کنیم.
• ما از .progress-bar داخلی برای نشان دادن پیشرفت تاکنون استفاده می کنیم.
• .progress-bar برای تنظیم عرض به سی اس اس سفارشی، استایل داخلی و یا کلاس ها نیاز دارد .
• .progress-bar همپنین برای قابل دستیابی شدن به بعضی از اتریبیوت های role و aria نیاز دارد.

اگر تمام این موارد را استفاده کنید نمونه ی زیر را مشاهده خواهید کرد.

ما فقط یک مقدار height یا ارتفاع روی .progress پراگس بار تنظیم می کنیم، اگر آن مقدار را تغییر دهید .progress-bar داخلی به طور خودکار اندازه تغییر می کند.

راه راه های گرادینت همچنین میتوانند متحرک باشند. برای این کار .progress-bar-animated به .progress-bar برای متحرک کردن راه راه ها از سمت راست به چپ از طریق انیمیشن های سی اس اس 3 اضافه کنید.

به نوار پیشرفت برچسب بزنید با جایگذاری متن داخل .progress-bar.

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

شامل چندین نوار پیشرفت در یک جزء نوار پیشرفت.

.progress-bar-striped را به .progress-barبرای راه اندازی استایل راه راه از طریق سی اس اس گرادینت بر روی رنگ های بک گراند اضافه کنید.