bulma/docs/documentation/elements/progress.html

72 lines
1.9 KiB
HTML
Raw Normal View History

---
2017-07-29 12:02:00 +00:00
title: Progess Bar
layout: documentation
doc-tab: elements
doc-subtab: progress
2017-07-28 21:57:51 +00:00
variables:
- name: $progress-bar-background-color
value: $border
- name: $progress-value-background-color
value: $text
---
2017-07-29 12:02:00 +00:00
{% capture progress %}
<progress class="progress" value="15" max="100">15%</progress>
{% endcapture %}
{% capture progress_colors %}
<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>
{% endcapture %}
{% capture progress_sizes %}
<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>
{% endcapture %}
{% 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>
2017-07-29 12:02:00 +00:00
{%
include meta.html
colors=true
sizes=true
variables=true
%}
<hr>
2017-08-14 11:44:24 +00:00
<div class="bd-example">
2017-07-29 12:02:00 +00:00
{{ progress }}
</div>
2017-07-29 12:02:00 +00:00
{% highlight html %}{{ progress }}{% endhighlight %}
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Colors" %}
2017-08-14 11:44:24 +00:00
<div class="bd-example">
2017-07-29 12:02:00 +00:00
{{ progress_colors }}
</div>
2017-07-29 12:02:00 +00:00
{% highlight html %}{{ progress_colors }}{% endhighlight %}
2017-08-14 17:25:14 +00:00
{% include anchor.html name="Sizes" %}
2017-07-29 12:02:00 +00:00
2017-08-14 11:44:24 +00:00
<div class="bd-example">
2017-07-29 12:02:00 +00:00
{{ progress_sizes }}
</div>
{% highlight html %}{{ progress_sizes }}{% endhighlight %}
2017-07-28 21:57:51 +00:00
{% include variables.html element=true %}
</div>
</section>