ADD: Progress indeterminate animation

3 files changed, 31 insertions, 3 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 31cbeaa..98ab342 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -52,13 +52,16 @@
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  background: #efefef;
   border: 0;
+  border-radius: .2rem;
   color: #5764c6;
   height: .4rem;
+  position: relative;
   width: 100%;
 }
 .progress::-webkit-progress-bar {
-  background: #efefef;
+  background: transparent;
   border-radius: .2rem;
 }
 .progress::-webkit-progress-value {
@@ -69,6 +72,31 @@
   background: #5764c6;
   border-radius: .2rem;
 }
+.progress:indeterminate {
+  -webkit-animation: progress-indeterminate 1.5s linear infinite;
+  animation: progress-indeterminate 1.5s linear infinite;
+  background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) no-repeat;
+  background-size: 150% 150%;
+}
+.progress:indeterminate::-moz-progress-bar {
+  background: transparent;
+}
+@-webkit-keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
 .slider {
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css
index 7473662..6d2f9b7 100644
--- a/docs/css/spectre-exp.min.css
+++ b/docs/css/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter::-moz-meter-bar,.meter::-moz-meter-optimum,.meter::-moz-meter-sub-optimum,.meter::-moz-meter-sub-sub-optimum{border-radius:.2rem}.meter::-moz-meter-bar{background:#f8f8f8}.meter:-moz-meter-optimum{background:#32b643}.meter:-moz-meter-sub-optimum{background:#ffb700}.meter:-moz-meter-sub-sub-optimum{background:#e85600}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#5764c6;height:.4rem;width:100%}.progress::-webkit-progress-bar{background:#efefef;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f8f8;border:0;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f8f8}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter::-moz-meter-bar,.meter::-moz-meter-optimum,.meter::-moz-meter-sub-optimum,.meter::-moz-meter-sub-sub-optimum{border-radius:.2rem}.meter::-moz-meter-bar{background:#f8f8f8}.meter:-moz-meter-optimum{background:#32b643}.meter:-moz-meter-sub-optimum{background:#ffb700}.meter:-moz-meter-sub-sub-optimum{background:#e85600}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#efefef;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#efefef linear-gradient(to right,#5764c6 30%,#efefef 30%) no-repeat;background-size:150% 150%}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider::-webkit-slider-runnable-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#efefef;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 4e8755c..8d5e8d4 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -145,7 +145,7 @@
               <progress class="progress" value="25" max="100"></progress>
             </div>
             <div class="column col-3 col-xs-12">
-              <progress class="progress" value="0" max="100"></progress>
+              <progress class="progress" max="100"></progress>
             </div>
           </div>
           <section class="notes">