fix(Progress): prevent NaN percent display when indeterminate

src/runtime/components/elements/Progress.vue

@@ -9,7 +9,7 @@
     </slot>
 
     <progress :class="progressClass" v-bind="{ value, max: realMax }">
-      {{ Math.round(percent) }}%
+      {{ percent !== undefined ? `${Math.round(percent)}%` : undefined }}
     </progress>
 
     <div v-if="isSteps" :class="stepsClass">
@@ -157,7 +157,7 @@ export default defineComponent({
       return index === 0
     }
 
-    function stepClasses (index: string|number) {
+    function stepClasses (index: string | number) {
       index = Number(index)
 
       const classes = [stepClass.value]
@@ -189,6 +189,10 @@ export default defineComponent({
     })
 
     const percent = computed(() => {
+      if (isIndeterminate.value) {
+        return undefined
+      }
+
       switch (true) {
       case props.value < 0: return 0
       case props.value > (realMax.value as number): return 100
@@ -237,9 +241,11 @@ progress:indeterminate {
     &:after {
       animation: carousel 2s ease-in-out infinite;
     }
+
     &::-webkit-progress-value {
       animation: carousel 2s ease-in-out infinite;
     }
+
     &::-moz-progress-bar {
       animation: carousel 2s ease-in-out infinite;
     }
@@ -249,9 +255,11 @@ progress:indeterminate {
     &:after {
       animation: carousel-inverse 2s ease-in-out infinite;
     }
+
     &::-webkit-progress-value {
       animation: carousel-inverse 2s ease-in-out infinite;
     }
+
     &::-moz-progress-bar {
       animation: carousel-inverse 2s ease-in-out infinite;
     }
@@ -261,9 +269,11 @@ progress:indeterminate {
     &:after {
       animation: swing 3s ease-in-out infinite;
     }
+
     &::-webkit-progress-value {
       animation: swing 3s ease-in-out infinite;
     }
+
     &::-moz-progress-bar {
       animation: swing 3s ease-in-out infinite;
     }
@@ -273,36 +283,77 @@ progress:indeterminate {
     &::after {
       animation: elastic 3s ease-in-out infinite;
     }
+
     &::-webkit-progress-value {
       animation: elastic 3s ease-in-out infinite;
     }
+
     &::-moz-progress-bar {
       animation: elastic 3s ease-in-out infinite;
     }
   }
 }
 
 @keyframes carousel {
-  0%, 100% { width: 50% }
-  0% { transform: translateX(-100%) }
-  100% { transform: translateX(200%) }
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(-100%)
+  }
+
+  100% {
+    transform: translateX(200%)
+  }
 }
 
 @keyframes carousel-inverse {
-  0%, 100% { width: 50% }
-  0% { transform: translateX(200%) }
-  100% { transform: translateX(-100%) }
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0% {
+    transform: translateX(200%)
+  }
+
+  100% {
+    transform: translateX(-100%)
+  }
 }
 
 @keyframes swing {
-  0%, 100% { width: 50% }
-  0%, 100% { transform: translateX(-25%) }
-  50% { transform: translateX(125%) }
+
+  0%,
+  100% {
+    width: 50%
+  }
+
+  0%,
+  100% {
+    transform: translateX(-25%)
+  }
+
+  50% {
+    transform: translateX(125%)
+  }
 }
 
 @keyframes elastic {
+
   /* Firefox doesn't do "margin: 0 auto", we have to play with margin-left */
-  0%, 100% { width: 50%; margin-left: 25%; }
-  50% { width: 90%; margin-left: 5% }
-}
-</style>
+  0%,
+  100% {
+    width: 50%;
+    margin-left: 25%;
+  }
+
+  50% {
+    width: 90%;
+    margin-left: 5%
+  }
+}</style>