نوار پیشرفت

نوارهای پیشرفت HTML محلی

رنگ بله
اندازه بله
متغیر بله

نوار پیشرفت Bulma یک کلاس CSS ساده است که تگ HTML <progress> محلی را استایل می دهد.

15%
<progress class="progress" value="15" max="100">15%</progress>

رنگ ها #

المان نوار پیشرفت در رنگ های مختلف با $colors Sass map تعریف شده است.

15% 30% 45% 60% 75% 90%

<progress class="progress is-primary" value="15" max="100">15%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>
                    

اندازه #

15% 30% 45% 60%

<progress class="progress is-small" value="15" max="100">15%</progress>
<progress class="progress" value="30" max="100">30%</progress>
<progress class="progress is-medium" value="45" max="100">45%</progress>
<progress class="progress is-large" value="60" max="100">60%</progress>
                    

نامشخص #

از 0.7.4

اگر ویژگی HTML value را تنظیم نکنید، می توانید یک نوار پیشرفت نامشخص نمایش دهید. این برای نشان دادن پیشرفت در حال استفاده است ، اما مدت زمان واقعی هنوز مشخص نشده است.

15% 30% 45% 60%

<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
<progress class="progress is-medium is-dark" max="100">45%</progress>
<progress class="progress is-large is-info" max="100">60%</progress>
                    

متغیر ها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$progress-bar-background-color color $border-light hsl(0, 0%, 93%)
$progress-value-background-color color $text hsl(0, 0%, 29%)
$progress-border-radius size $radius-rounded 290486px
$progress-indeterminate-duration string 1.5s
$progress-colors function $colors mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)