bulma/docs/documentation/elements/progress.html at master · CssFormWork/bulma · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
---
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>