From ebc5ad28173ae0bbae53bfe6e468e009d184d8f7 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 1 Mar 2017 18:33:29 +0800
Subject: ADD: Progress indeterminate animation

---
 docs/css/spectre-exp.css | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

(limited to 'docs/css/spectre-exp.css')

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;
-- 
cgit v1.3.1-23-gd82d