Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-21 20:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Added indeterminate progress bar

Browse Source
This commit is contained in:
I'm Luis! ^-^
2018-10-07 21:32:48 -04:00
committed by Jeremy Thomas
parent 4d2e608edf
commit 61899e3ede
2 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,6 +34,13 @@ meta:
<progress class="progress is-large" value="60" max="100">60%</progress> <progress class="progress is-large" value="60" max="100">60%</progress>
{% endcapture %} {% 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 %}
{% include elements/snippet.html content=progress %} {% include elements/snippet.html content=progress %}
{% include elements/anchor.html name="Colors" %} {% include elements/anchor.html name="Colors" %}
@@ -44,4 +51,8 @@ meta:
{% include elements/snippet.html content=progress_sizes %} {% include elements/snippet.html content=progress_sizes %}
{% include elements/anchor.html name="Indeterminate" %}
{% include elements/snippet.html content=progress_indeterminate %}
{% include elements/variables.html type='element' %} {% include elements/variables.html type='element' %}

21
sass/elements/progress.sass
View File

@@ -31,6 +31,21 @@ $progress-value-background-color: $text !default
background-color: $color background-color: $color
&::-ms-fill &::-ms-fill
background-color: $color background-color: $color
&:indeterminate
&::-webkit-progress-bar
background-color: transparent
&::-moz-progress-bar
background-color: transparent
animation: progress-indeterminate 1.5s linear infinite
background: $progress-bar-background-color linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) top left / 150% 150% no-repeat
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
background: $progress-bar-background-color linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) top left / 150% 150% no-repeat
// Sizes // Sizes
&.is-small &.is-small
height: $size-small height: $size-small
@@ -38,3 +53,9 @@ $progress-value-background-color: $text !default
height: $size-medium height: $size-medium
&.is-large &.is-large
height: $size-large height: $size-large
@keyframes progress-indeterminate
0%
background-position: 200% 0
100%
background-position: -200% 0