Fix #372

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 0.7.3
 
+### New features
+
+* #2145 Fix #372 -> New indeterminate progress bars
+
 ### Improvements
 
 * #1978 Fix #1696 -> Force `box-sizing: border-box` on `details` element

docs/css/bulma-docs.css

@@ -4031,16 +4031,16 @@ a.box:active {
   border-radius: 0;
 }
 
-.field.has-addons .control:first-child .button,
-.field.has-addons .control:first-child .input,
-.field.has-addons .control:first-child .select select {
+.field.has-addons .control:first-child:not(:only-child) .button,
+.field.has-addons .control:first-child:not(:only-child) .input,
+.field.has-addons .control:first-child:not(:only-child) .select select {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
 
-.field.has-addons .control:last-child .button,
-.field.has-addons .control:last-child .input,
-.field.has-addons .control:last-child .select select {
+.field.has-addons .control:last-child:not(:only-child) .button,
+.field.has-addons .control:last-child:not(:only-child) .input,
+.field.has-addons .control:last-child:not(:only-child) .select select {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -4536,6 +4536,30 @@ a.box:active {
   border: none;
 }
 
+.progress:indeterminate {
+  -webkit-animation-duration: 1.5s;
+          animation-duration: 1.5s;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  -webkit-animation-name: moveIndeterminate;
+          animation-name: moveIndeterminate;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+  background-color: #dbdbdb;
+  background-image: linear-gradient(to right, #4a4a4a 30%, #dbdbdb 30%);
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-size: 150% 150%;
+}
+
+.progress:indeterminate::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+.progress:indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+
 .progress.is-white::-webkit-progress-value {
   background-color: white;
 }
@@ -4548,6 +4572,10 @@ a.box:active {
   background-color: white;
 }
 
+.progress.is-white:indeterminate {
+  background-image: linear-gradient(to right, white 30%, #dbdbdb 30%);
+}
+
 .progress.is-black::-webkit-progress-value {
   background-color: #0a0a0a;
 }
@@ -4560,6 +4588,10 @@ a.box:active {
   background-color: #0a0a0a;
 }
 
+.progress.is-black:indeterminate {
+  background-image: linear-gradient(to right, #0a0a0a 30%, #dbdbdb 30%);
+}
+
 .progress.is-light::-webkit-progress-value {
   background-color: whitesmoke;
 }
@@ -4572,6 +4604,10 @@ a.box:active {
   background-color: whitesmoke;
 }
 
+.progress.is-light:indeterminate {
+  background-image: linear-gradient(to right, whitesmoke 30%, #dbdbdb 30%);
+}
+
 .progress.is-dark::-webkit-progress-value {
   background-color: #363636;
 }
@@ -4584,6 +4620,10 @@ a.box:active {
   background-color: #363636;
 }
 
+.progress.is-dark:indeterminate {
+  background-image: linear-gradient(to right, #363636 30%, #dbdbdb 30%);
+}
+
 .progress.is-primary::-webkit-progress-value {
   background-color: #00d1b2;
 }
@@ -4596,6 +4636,10 @@ a.box:active {
   background-color: #00d1b2;
 }
 
+.progress.is-primary:indeterminate {
+  background-image: linear-gradient(to right, #00d1b2 30%, #dbdbdb 30%);
+}
+
 .progress.is-link::-webkit-progress-value {
   background-color: #3273dc;
 }
@@ -4608,6 +4652,10 @@ a.box:active {
   background-color: #3273dc;
 }
 
+.progress.is-link:indeterminate {
+  background-image: linear-gradient(to right, #3273dc 30%, #dbdbdb 30%);
+}
+
 .progress.is-info::-webkit-progress-value {
   background-color: #209cee;
 }
@@ -4620,6 +4668,10 @@ a.box:active {
   background-color: #209cee;
 }
 
+.progress.is-info:indeterminate {
+  background-image: linear-gradient(to right, #209cee 30%, #dbdbdb 30%);
+}
+
 .progress.is-success::-webkit-progress-value {
   background-color: #23d160;
 }
@@ -4632,6 +4684,10 @@ a.box:active {
   background-color: #23d160;
 }
 
+.progress.is-success:indeterminate {
+  background-image: linear-gradient(to right, #23d160 30%, #dbdbdb 30%);
+}
+
 .progress.is-warning::-webkit-progress-value {
   background-color: #ffdd57;
 }
@@ -4644,6 +4700,10 @@ a.box:active {
   background-color: #ffdd57;
 }
 
+.progress.is-warning:indeterminate {
+  background-image: linear-gradient(to right, #ffdd57 30%, #dbdbdb 30%);
+}
+
 .progress.is-danger::-webkit-progress-value {
   background-color: #ff3860;
 }
@@ -4656,6 +4716,10 @@ a.box:active {
   background-color: #ff3860;
 }
 
+.progress.is-danger:indeterminate {
+  background-image: linear-gradient(to right, #ff3860 30%, #dbdbdb 30%);
+}
+
 .progress.is-small {
   height: 0.75rem;
 }
@@ -4668,6 +4732,24 @@ a.box:active {
   height: 1.5rem;
 }
 
+@-webkit-keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
 .table {
   background-color: white;
   color: #363636;

docs/documentation/elements/progress.html

@@ -53,6 +53,14 @@ meta:
 
 {% include elements/anchor.html name="Indeterminate" %}
 
+{% include elements/new-tag.html version="0.7.3" %}
+
+<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' %}

sass/elements/progress.sass

@@ -1,6 +1,8 @@
 $progress-bar-background-color: $border !default
 $progress-value-background-color: $text !default
 
+$progress-indeterminate-duration: 1.5s !default
+
 .progress
   @extend %block
   -moz-appearance: none
@@ -21,6 +23,20 @@ $progress-value-background-color: $text !default
   &::-ms-fill
     background-color: $progress-value-background-color
     border: none
+  &:indeterminate
+    animation-duration: $progress-indeterminate-duration
+    animation-iteration-count: infinite
+    animation-name: moveIndeterminate
+    animation-timing-function: linear
+    background-color: $progress-bar-background-color
+    background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
+    background-position: top left
+    background-repeat: no-repeat
+    background-size: 150% 150%
+    &::-webkit-progress-bar
+      background-color: transparent
+    &::-moz-progress-bar
+      background-color: transparent
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -31,20 +47,8 @@ $progress-value-background-color: $text !default
         background-color: $color
       &::-ms-fill
         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
+      &:indeterminate
+        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
 
   // Sizes
   &.is-small
@@ -54,8 +58,8 @@ $progress-value-background-color: $text !default
   &.is-large
     height: $size-large
 
-@keyframes progress-indeterminate
-  0%
+@keyframes moveIndeterminate
+  from
     background-position: 200% 0
-  100%
+  to
     background-position: -200% 0