داشبورد متریال - نوار پیشرفت

از طریق به اشتراک گذاشتن به‌روزرسانی‌های مربوط به کارهایتان، کاربران را مشتاق نگه دارید. نوارهای پیشرفت نحوه پیشرفت کار ها را به شکل بصری نشان می‌دهند و آنها را به وضوح به نمایش می‌گذارند.

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

نوار پیشرفت دایره‌ای، که اغلب در نشانگرهای بارگذاری دیده می‌شود، بازخورد تصویری از فرآیندهای در حال اجرا را فراهم می‌کند. به وسیله یک انیمیشن دایره‌ای، پیشرفت را نمایش می‌دهد و احساس پیشرفت را منتقل می‌کند. از این المان در زمان مشخص نبودن زمان پایان کار استفاده می‌شود.

<progress class="hb-progress-circular"></progress>

نوار پیشرفت خطی

نوارهای پیشرفت خطی، نوعی دیگر از نوار های پیشرفت هستند که به صورت خطی نمایش پیشرفت یک عملیات را ارائه می‌دهند. آنها نشانگر واضحی از مقداری که از یک فرآیند انجام شده است را فراهم می‌کنند و به کاربران در درک وضعیت عملیات در حال اجرا کمک می‌کنند.

<!-- Indeterminate -->
<progress class="hb-progress-linear"></progress>

<!-- Valued -->
<progress class="hb-progress-linear" value="50" max="100"></progress>

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

شما می‌توانید رنگ نوارهای پیشرفت خود را سفارشی کنید. این کار معمولاً برای نمایش وضعیت پیشرفت یا حتی اولویت بندی نوار پیشرفت استفاده می‌شود.

<progress class="hb-progress-circular color-red-im"></progress>
<progress class="hb-progress-circular color-green-im"></progress>
<progress class="hb-progress-circular color-blue-im"></progress>
<progress class="hb-progress-circular color-orange-im"></progress>

<progress class="hb-progress-linear color-red-im"></progress>
<progress class="hb-progress-linear color-green-im"></progress>
<progress class="hb-progress-linear color-blue-im"></progress>
<progress class="hb-progress-linear color-orange-im"></progress>