نوارهای پیشرفت

نمونه های پیش فرض

اجزای نوار پیشرفت توسط دو المان HTML ساخته می شوند، مقداری CSS برای تنظیم عرض و چند attribute.

پس زمینه ها

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

نمونه برچسب ها

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

25%

نوار های چندگانه

در صورت نیاز چند نوار پیشرفت را داخل یک نوار پیشرفت قرار دهید.

ارتفاع

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

راه راه متحرک

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

راه راه

افزودن .progress-bar-striped به هر .progress-bar برای افزودن طرح راه راه به پس زمینه نوار پیشرفت کاربرد دارد.

پیشرفت متحرک

افزودن .animated-progess به همراه .progress-bar باعث متحرک شدن پیشرفت نوار می شود.

© کووکس.
ارائه شده در وب‌سایت راست‌چین