Progressbars
مثال های پیش فرض
اجزای پیشرفت با دو عنصر HTML ، برخی CSS برای تنظیم عرض و چند ویژگی ساخته شده اند.
پس زمینه ها
برای تغییر شکل ظاهری میله های پیشرفت فردی ، از کلاسهای ابزار پس زمینه استفاده کنید.
نمونه برچسب ها
برچسب ها را به نوارهای پیشرفت خود اضافه کنید با قرار دادن متن در .progress-bar.
چند نوار
در صورت نیاز ، چندین نوار پیشرفت را در یک جزء پیشرفت قرار دهید.
ارتفاع
ما فقط مقدار height را روی .progress-bar تنظیم می کنیم ، بنابراین اگر این مقدار را تغییر دهید < code class = "highlighter-rouge">.progress به طور خودکار متناسب با آن تغییر اندازه می دهد.
راه راه متحرک
شیب راه راه همچنین می تواند متحرک باشد. اضافه کنید.progress-bar-animated to .progress-bar را برای متحرک سازی نوارها از راست به چپ از طریق انیمیشن های CSS3.
راه راه
اضافه کنید.progress-bar-stripedبه هر .progress-bar برای اعمال یک نوار از طریق شیب CSS بر روی رنگ پس زمینه نوار پیشرفت.