Merge 2003e09 into faf5353

vaadin · Jun 27, 2019 · f1208c6 · f1208c6
2 parents faf5353 + 2003e09
commit f1208c6
Showing 1 changed file with 14 additions and 11 deletions.
diff --git a/theme/lumo/vaadin-progress-bar-styles.html b/theme/lumo/vaadin-progress-bar-styles.html
@@ -37,39 +37,42 @@
         background-image: var(--lumo-progress-indeterminate-progress-bar-background);
         opacity: 0.75;
         will-change: transform;
-        animation: vaadin-progress-slide 1.6s infinite cubic-bezier(.645, .045, .355, 1), vaadin-progress-scale 1.6s infinite cubic-bezier(.645, .045, .355, 1);
+        animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(.645, .045, .355, 1);
       }
 
-      @keyframes vaadin-progress-slide {
+      @keyframes vaadin-progress-indeterminate {
         0% {
+          transform: scaleX(0.015);
           transform-origin: 0% 0%;
         }
 
+        25% {
+          transform: scaleX(0.4);
+        }
+
         50% {
+          transform: scaleX(0.015);
           transform-origin: 100% 0%;
           background-image: var(--lumo-progress-indeterminate-progress-bar-background);
         }
 
         50.1% {
+          transform: scaleX(0.015);
           transform-origin: 100% 0%;
           background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
         }
 
+        75% {
+          transform: scaleX(0.4);
+        }
+
         100% {
+          transform: scaleX(0.015);
           transform-origin: 0% 0%;
           background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse);
         }
       }
 
-      @keyframes vaadin-progress-scale {
-        0% { transform: scaleX(0.015); }
-        25% { transform: scaleX(0.4); }
-        50% { transform: scaleX(0.015); }
-        50.1% { transform: scaleX(0.015); }
-        75% { transform: scaleX(0.4); }
-        100% { transform: scaleX(0.015); }
-      }
-
       :host(:not([aria-valuenow])) [part="value"]::before,
       :host([indeterminate]) [part="value"]::before {
         content: "";