Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-16 02:34:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/documentation/elements/progress.html
View File

@@ -1,23 +1,22 @@
---
title: Progress Bar
layout: documentation
layout: docs
theme: library
doc-tab: elements
doc-subtab: progress
breadcrumb:
- home
- documentation
- elements
- elements-progress
- 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_indeterminate %}
<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
@@ -27,46 +26,53 @@ meta:
<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>&lt;progress&gt;</code> HTML element</a>.
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>&lt;progress&gt;</code> HTML element</a
>.
</p>
</div>
{% include elements/snippet.html content=progress %}
{% include elements/anchor.html name="Colors" %}
{% include docs/elements/snippet.html content=progress %}
{% include docs/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>.
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>
{% for color in site.data.colors.justColors %}
{% capture foobar %}
{% assign n = forloop.index | times: 15 %}
<progress class="progress is-{{ color }}" value="{{ n }}" max="100">{{ n }}%</progress>
{% capture foobar %} {% assign n
= forloop.index | times: 15 %}
<progress class="progress is-{{ color }}" value="{{ n }}" max="100">
{{ n }}%
</progress>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="Sizes" %}
{% include docs/elements/anchor.html name="Sizes" %}
{% for size in site.data.sizes %}
{% capture foobar %}
{% assign n = forloop.index | times: 20 %}
<progress class="progress is-{{ size }}" value="{{ n }}" max="100">{{ n }}%</progress>
{% capture foobar %} {% assign n = forloop.index | times: 20
%}
<progress class="progress is-{{ size }}" value="{{ n }}" max="100">
{{ n }}%
</progress>
{% endcapture %}
{% include elements/snippet.html content=foobar %}
{% include docs/elements/snippet.html content=foobar %}
{% endfor %}
{% include elements/anchor.html name="Indeterminate" %}
{% include docs/elements/anchor.html name="Indeterminate" %}
<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 total duration is not yet determined.
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 total duration is not yet determined.
</p>
</div>
{% include elements/snippet.html content=progress_indeterminate %}
{% include docs/elements/snippet.html content=progress_indeterminate %}
{% include components/variables.html type='element' %}