mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
79 lines
2.7 KiB
HTML
79 lines
2.7 KiB
HTML
---
|
|
title: Progress Bar
|
|
layout: documentation
|
|
doc-tab: elements
|
|
doc-subtab: progress
|
|
breadcrumb:
|
|
- home
|
|
- documentation
|
|
- elements
|
|
- elements-progress
|
|
meta:
|
|
colors: true
|
|
sizes: true
|
|
variables: true
|
|
---
|
|
|
|
{% capture progress %}
|
|
<progress class="progress" value="15" max="100">15%</progress>
|
|
{% endcapture %}
|
|
|
|
{% capture progress_colors %}
|
|
<progress class="progress is-primary" value="15" max="100">15%</progress>
|
|
<progress class="progress is-link" 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 %}
|
|
|
|
{% capture progress_indeterminate %}
|
|
<progress class="progress is-small is-primary" max="100">15%</progress>
|
|
<progress class="progress is-danger" max="100">30%</progress>
|
|
<progress class="progress is-medium is-dark" max="100">45%</progress>
|
|
<progress class="progress is-large is-info" max="100">60%</progress>
|
|
{% endcapture %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The Bulma progress bar is a simple CSS class that styles the native <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress" target="_blank"><code><progress></code> HTML element</a>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=progress %}
|
|
|
|
{% include elements/anchor.html name="Colors" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
The progress bar element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=progress_colors %}
|
|
|
|
{% include elements/anchor.html name="Sizes" %}
|
|
|
|
{% include elements/snippet.html content=progress_sizes %}
|
|
|
|
{% include elements/anchor.html name="Indeterminate" %}
|
|
|
|
{% include elements/new-tag.html version="0.7.4" %}
|
|
|
|
<div class="content">
|
|
<p>
|
|
If you don't set the HTML <code>value</code> attribute, you can display an <strong>indeterminate</strong> progress bar. It's used to show that some progress is going on, but the actual duration is not yet determined.
|
|
</p>
|
|
</div>
|
|
|
|
{% include elements/snippet.html content=progress_indeterminate %}
|
|
|
|
{% include elements/variables.html type='element' %}
|