mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
HTML
|
---
|
||
|
|
layout: documentation
|
||
|
|
doc-tab: elements
|
||
|
|
doc-subtab: progress
|
||
|
|
---
|
||
|
|
|
||
|
|
{% include subnav-elements.html %}
|
||
|
|
|
||
|
|
<section class="section">
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="title">Progress bars</h1>
|
||
|
|
<h2 class="subtitle">
|
||
|
|
Native HTML <strong>progress</strong> bars
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<div class="example">
|
||
|
|
<progress class="progress" value="15" max="100">15%</progress>
|
||
|
|
<progress class="progress is-primary" 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>
|
||
|
|
</div>
|
||
|
|
{% highlight html %}
|
||
|
|
<progress class="progress" value="15" max="100">15%</progress>
|
||
|
|
<progress class="progress is-primary" 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>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<h3 class="title">Sizes</h3>
|
||
|
|
<div class="example">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
{% highlight html %}
|
||
|
|
<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>
|
||
|
|
{% endhighlight %}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|