Progress Bars
Huro provides a very versatile progress bar component that can
be used almost anywhere, across a wide variety of layouts. 3
size modifier classes are available: .is-small,
.is-smaller and .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>
Progress Bars
Huro progress bars can also have different colors. Available
modifier classes are: .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>
Indeterminate Progress
In some particular use cases, you might want to show an
undetermined progress. If you want your progress bars to show
an undetermined state, you just need to omit the
value="" attribute. The CSS will take care of the
rest.
<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>