پیشرفت رابط کاربری | قالب مدیریت و داشبورد میربال

پیشرفت اساسی

ایجاد یک نوار پیشرفت با استفاده از بوت استرپ .پیشرفتو نوار پیشرفت کلاس ها عرض نوار پیشرفت را با سبک های درون خطی یا کلاس های کاربردی تنظیم کنید تا پیشرفت را نشان دهد.

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 100%"></div>
</div>

پیشرفت رنگی

استفاده کنید نوارهای پیشرفت رنگی در بوت استرپ با اعمال کلاس هایی مانند .bg-موفقیت یا .bg- خطر به نوار پیشرفت برای رنگ های مختلف

<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info" style="width: 100%"></div>
</div>

پیشرفت با برچسب ها

نمایش برچسب ها در نوارهای پیشرفت بوت استرپ با اضافه کردن متن در داخل <div class="progress-bar">. از کلاس هایی مانند استفاده کنید متن-سفید برای رنگ متن

20%

40%

60%

80%

100%

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 20%">20%</div>
</div>
<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 40%">40%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info" style="width: 60%">60%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning" style="width: 80%">80%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

اندازه پیشرفت

اندازه نوارهای پیشرفت را با استفاده از کلاس های سفارشی به راحتی تنظیم کنید. را .progress-xs کلاس نشان دهنده یک نوار پیشرفت کوچک اضافی است که برای چیدمان های فشرده عالی است.

<div class="progress progress-xs" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 20%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 40%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 60%"></div>
</div>
<div class="progress progress-lg" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 80%"></div>
</div>
<div class="progress progress-xl" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 100%"></div>
</div>

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

ایجاد کنید نوارهای پیشرفت راه راه در بوت استرپ با اضافه کردن .پیشرفت-نوار-راه راه کلاس به شما <div class="progress-bar">. این یک الگوی راه راه به نوار پیشرفت برای ظاهری پویا اضافه می کند.

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

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

اضافه کنید انیمیشن به نوارهای پیشرفت راه راه در بوت استرپ با استفاده از .پیشرفت-نوار-انیمیشن با .پیشرفت-نوار-راه راه. این باعث می شود که نوارها حرکت کنند و جلوه ای پویا ایجاد کنند.

<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Info striped example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Warning striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Danger striped example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 100%"></div>
</div>

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

استفاده کنید نوار پیشرفت دایره سفارشی با افزودن a .دایره-پیشرفت کلاس در داخل، از یک استفاده کنید <svg> عنصر با <دایره> عناصر برای پس زمینه و پیش زمینه برای نمایش بصری پیشرفت.

70%

<div class="circular-progress">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
</div>
<div class="circular-progress" style="--progress: 70;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">70%</div>
</div>

پیشرفت اندازه دایره

استفاده کنید کلاس های اندازه مانند .دایره-* برای تنظیم اندازه نوار پیشرفت دایره در بوت استرپ. آن را اعمال کنید .دایره-پیشرفت برای نمایشگر بزرگتر

40%

<div class="d-flex align-items-center gap-3">
    <div class="circular-progress circular-xxl">
        <svg class="circular-inner" viewBox="0 0 130 130">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>

    <div class="circular-progress circular-xl">
        <svg class="circular-inner" viewBox="0 0 110 110">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>

    <div class="circular-progress circular-progress-secondary">
        <svg class="circular-inner" viewBox="0 0 90 90">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>

    <div class="circular-progress circular-md">
        <svg class="circular-inner" viewBox="0 0 76 76">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>

    <div class="circular-progress circular-sm">
        <svg class="circular-inner" viewBox="0 0 56 56">
            <circle class="bg-circular-progress"></circle>
            <circle class="fg-circular-progress"></circle>
        </svg>
        <div class="circular-text">40%</div>
    </div>
</div>

پیشرفت رنگ دایره

را تغییر دهید رنگ نوار پیشرفت دایره خود را با استفاده از .دایره-پیشرفت-* کلاس این کلاس را به .دایره-پیشرفت برای یک طرح رنگی

10%

70%

40%

22%

90%

40%

50%

<div class="circular-progress circular-progress-primary" style="--progress: 10;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">10%</div>
</div>
<div class="circular-progress circular-progress-secondary" style="--progress: 70;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">70%</div>
</div>
<div class="circular-progress circular-progress-success" style="--progress: 40;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-progress-info" style="--progress: 22;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">22%</div>
</div>
<div class="circular-progress circular-progress-warning" style="--progress: 90;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">90%</div>
</div>
<div class="circular-progress circular-progress-danger" style="--progress: 40;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">40%</div>
</div>
<div class="circular-progress circular-progress-dark" style="--progress: 50;">
    <svg class="circular-inner" viewBox="0 0 90 90">
        <circle class="bg-circular-progress"></circle>
        <circle class="fg-circular-progress"></circle>
    </svg>
    <div class="circular-text">50%</div>
</div>

یک کار جدید دارید

یک پیام از نایومی

شما ادمین شدید

یک پیام از رابرت

پرداخت از جاناتان

کامنت جدید روی پست شما

پیام جدید از اما

یادآوری: جلسه 3 عصر

نامه از مارکتینگ

پیام سیستم: آپدیت شد

پیام از کلارا

تسک جدید: طراحی یوای

ارسال گزارش پروژه

اتمام تسک: ای پی ای اینتگرید شد

کد ریویو: در انتظار تایید

همه مشاهده شد

229 تومان

146 تومان

220 تومان

40 تومان

99 تومان

₹129

پیشرفت

پیشرفت

نمای کلی صفحه

پیشرفت اساسی

پیشرفت رنگی

پیشرفت با برچسب ها

اندازه پیشرفت

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

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

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

پیشرفت اندازه دایره

پیشرفت رنگ دایره

سفارشی سازی تم

طرح بندی:

عمودی

افقی

نیم جعبه

عرض محتوا:

پیش فرض

جعبه

جهت چیدمان:

LTR

RTL

حالت چیدمان:

نور

تاریک

سیستم

اندازه نوار کناری:

پیش فرض

متوسط

نماد

نماد شناور

رنگ نوار کناری

رنگ اولیه