bulma/docs/documentation/elements/progress.html

48 lines
1.4 KiB
HTML
Raw Normal View History

---
2017-10-09 08:10:12 +00:00
title: Progress Bar
layout: documentation
doc-tab: elements
doc-subtab: progress
2018-04-09 13:15:31 +00:00
breadcrumb:
- home
- documentation
- elements
- elements-progress
meta:
colors: true
sizes: true
variables: true
---
2017-07-29 12:02:00 +00:00
{% capture progress %}
<progress class="progress" value="15" max="100">15%</progress>
{% endcapture %}
{% capture progress_colors %}
2017-10-09 17:13:02 +00:00
<progress class="progress is-primary" value="15" max="100">30%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
2017-07-29 12:02:00 +00:00
<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 %}
2018-04-09 21:25:26 +00:00
{% include elements/snippet.html content=progress %}
2018-04-09 21:25:26 +00:00
{% include elements/anchor.html name="Colors" %}
2018-04-09 21:25:26 +00:00
{% include elements/snippet.html content=progress_colors %}
2018-04-09 21:25:26 +00:00
{% include elements/anchor.html name="Sizes" %}
2018-04-09 21:25:26 +00:00
{% include elements/snippet.html content=progress_sizes %}
2018-04-09 21:25:26 +00:00
{% include elements/variables.html type='element' %}