نوار پیشرفت روند
Huro یک مؤلفه نوار پیشرفت بسیار همه کاره را ارائه می دهد که می تواند تقریباً در همه جا و در طیف گسترده ای از طرح بندی ها استفاده شود. 3 کلاس اصلاح کننده اندازه موجود است: .is-small, .is-smaller و .is-tiny.
<progress class="progress is-primary is-tiny" value="65" max="100">65%</progress>
<progress class="progress is-primary is-smaller" value="90" max="100">90%</progress>
<progress class="progress is-primary is-small" value="31" max="100">31%</progress>
<progress class="progress is-primary" value="15" max="100">15%</progress>
نوار پیشرفت روند رنگی
Huro همچنین دارای نوارهای روند پیشرفت رنگی می باشد مانند کلاس های: .is-primary, .is-success .is-info, .is-warning, and .is-danger.
<progress class="progress is-primary is-tiny" value="70" max="100">70%</progress>
<progress class="progress is-success is-tiny" value="55" max="100">55%</progress>
<progress class="progress is-info is-tiny" value="45" max="100">45%</progress>
<progress class="progress is-warning is-tiny" value="60" max="100">60%</progress>
<progress class="progress is-danger is-tiny" value="38" max="100">38%</progress>
نوار پیشرفت روند معلق
در بعضی مواقع نیاز به معلق نشان دادن وضعیت پیشرفت یک روند هستید که میتوانید از پارامترهای : value="" و این ویژگی css را مجدد راه اندازی می کند.
<progress class="progress is-primary is-tiny" max="100">70%</progress>
<progress class="progress is-success is-tiny" max="100">55%</progress>
<progress class="progress is-info is-tiny" max="100">45%</progress>
<progress class="progress is-warning is-tiny" max="100">60%</progress>
<progress class="progress is-danger is-tiny" max="100">38%</progress>