feat(progress): indeterminate progress bar (#1832)

* feat: indeterminate-progress

* docs: 补充属性

* fix: 更新单元测试用例

* chore: 优化性能

* docs: Indeterminate progress other lang

* chore: progress bem classname && docs

* docs: speed -> duration

* docs: progress docs

packages/progress/__tests__/progress.spec.ts

@@ -9,7 +9,7 @@ describe('Progress.vue', () => {
       },
     })
     expect(wrapper.find('.el-progress__text').text()).toBe('66%')
-    expect(wrapper.find('.el-progress-bar__inner').attributes('style')).toBe('width: 66%;')
+    expect(wrapper.find('.el-progress-bar__inner').attributes('style')).toBe('width: 66%; animation-duration: 3s;')
   })
 
   test('status', () => {

packages/progress/src/index.vue

@@ -16,7 +16,13 @@
   >
     <div v-if="type === 'line'" class="el-progress-bar">
       <div class="el-progress-bar__outer" :style="{height: `${strokeWidth}px`}">
-        <div class="el-progress-bar__inner" :style="barStyle">
+        <div
+          :class="[
+            'el-progress-bar__inner',
+            { 'el-progress-bar__inner--indeterminate' : indeterminate }
+          ]"
+          :style="barStyle"
+        >
           <div v-if="(showText || $slots.default) && textInside" class="el-progress-bar__innerText">
             <slot v-bind="slotData">
               <span>{{ content }}</span>
@@ -68,6 +74,8 @@ interface IProgressProps {
   type: string
   percentage: number
   status: string
+  indeterminate: boolean
+  duration: number
   strokeWidth: number
   strokeLinecap: string
   textInside: boolean
@@ -96,6 +104,14 @@ export default defineComponent({
       default: '',
       validator: (val: string): boolean => ['', 'success', 'exception', 'warning'].indexOf(val) > -1,
     },
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
+    duration: {
+      type: Number,
+      default: 3,
+    },
     strokeWidth: {
       type: Number,
       default: 6,
@@ -129,6 +145,7 @@ export default defineComponent({
     const barStyle = computed(() => {
       return {
         width: `${props.percentage}%`,
+        animationDuration: `${props.duration}s`,
         backgroundColor: getCurrentColor(props.percentage),
       }
     })

packages/theme-chalk/src/progress.scss

@@ -89,6 +89,7 @@
       color: $--color-danger;
     }
   }
+
 }
 
 @include b(progress-bar) {
@@ -116,6 +117,11 @@
     transition: width 0.6s ease;
 
     @include utils-vertical-center;
+
+    @include m(indeterminate) {
+      transform: translateZ(0);
+      animation: indeterminate 3s infinite;
+    }
   }
 
   @include e(innerText) {
@@ -136,3 +142,13 @@
     background-position: 32px 0;
   }
 }
+
+@keyframes indeterminate {
+  0% {
+    left: -100%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}

website/docs/en-US/progress.md

@@ -182,6 +182,29 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
 ```
 :::
 
+### Indeterminate progress
+
+:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
+
+```html
+<el-progress :percentage="50" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" :format="format" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"></el-progress>
+<el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"></el-progress>
+<el-progress :percentage="50" status="exception" :indeterminate="true"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | --- | ---- | ---- | ---- | ---- |
@@ -190,6 +213,8 @@ You also can specify `type` attribute to `dashboard` to use dashboard progress b
 | stroke-width | the width of progress bar | number | — | 6 |
 | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
 | status | the current status of progress bar | string | success/exception/warning | — |
+| indeterminate  | set indeterminate progress | boolean | - | false |
+| duration  | control the animation duration of indeterminate progress | number | - | 3 |
 | color  | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |

website/docs/es/progress.md

@@ -180,6 +180,29 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
 ```
 :::
 
+### Indeterminate progress
+
+:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
+
+```html
+<el-progress :percentage="50" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" :format="format" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"></el-progress>
+<el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"></el-progress>
+<el-progress :percentage="50" status="exception" :indeterminate="true"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Atributos
 | Atributo     | Descripción                              | Tipo    | Valores aceptado  | Por defecto |
 | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
@@ -188,6 +211,8 @@ Puede utilizar el atributo `color` para establecer el color de la barra de progr
 | stroke-width | ancho de la barra de progreso            | number  | —                 | 6           |
 | text-inside  | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | —                 | false       |
 | status       | estado actual de la barra de progreso    | string  | success/exception/warning | —   |
+| indeterminate  | set indeterminate progress | boolean | - | false |
+| duration  | control the animation duration of indeterminate progress  | number | - | 3 |
 | color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
 | width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | show-text    | mostrar porcentaje                       | boolean | —                 | true        |

website/docs/fr-FR/progress.md

@@ -182,6 +182,29 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
 ```
 :::
 
+### Indeterminate progress
+
+:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
+
+```html
+<el-progress :percentage="50" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" :format="format" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"></el-progress>
+<el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"></el-progress>
+<el-progress :percentage="50" status="exception" :indeterminate="true"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributs
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
@@ -191,6 +214,8 @@ Vous pouvez également spécifier l'attribut `type` de `dashboard` pour utiliser
 | stroke-width | La largeur de la barre. | number | — | 6 |
 | text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |
 | status | Le statut actuel de la progression. | string | success/exception/text | — |
+| indeterminate  | set indeterminate progress | boolean | - | false |
+| duration  | control the animation duration of indeterminate progress | number | - | 3 |
 | color  | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
 | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
 | show-text | Si le pourcentage doit être affiché. | boolean | — | true |

website/docs/jp/progress.md

@@ -182,6 +182,29 @@
 ```
 :::
 
+### Indeterminate progress
+
+:::demo Use `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
+
+```html
+<el-progress :percentage="50" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" :format="format" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"></el-progress>
+<el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"></el-progress>
+<el-progress :percentage="50" status="exception" :indeterminate="true"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### 属性
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | --- | ---- | ---- | ---- | ---- |
@@ -190,6 +213,8 @@
 | stroke-width | プログレスバーの幅 | number | — | 6 |
 | text-inside | パーセントをプログレスバーの中に配置するかどうか、`type`が 'line'の場合のみ動作します。 | boolean | — | false |
 | status | プログレスバーの現在の状態 | string | success/exception/warning | — |
+| indeterminate  | 操作にかかる時間を示しません | boolean | - | false |
+| duration  | indeterminateのプログレスバーのアニメーション期間 | number | - | 3 |
 | color  | プログレスバーの背景色を指定します。`status` プロップをオーバーライドします。 | string/function/array | — | '' |
 | width | サークルプログレスバーのキャンバス幅 | number | — | 126 |
 | show-text | パーセンテージ表示の有無 | boolean | — | true |

website/docs/zh-CN/progress.md

@@ -186,6 +186,29 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
 ```
 :::
 
+### 动画进度条
+
+:::demo Progress 组件设置 `indeterminate` 属性控制进度条运动。通过设置 `duration` 属性可以控制运动速度。
+
+```html
+<el-progress :percentage="50" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" :format="format" :indeterminate="true"></el-progress>
+<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5"></el-progress>
+<el-progress :percentage="100" status="warning" :indeterminate="true" :duration="1"></el-progress>
+<el-progress :percentage="50" status="exception" :indeterminate="true"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? '满' : `${percentage}%`;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
@@ -194,6 +217,8 @@ Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
 | text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
 | status  | 进度条当前状态 | string | success/exception/warning | — |
+| indeterminate  | 是否为动画进度条 | boolean | - | false |
+| duration  | 控制动画进度条速度 | number | - | 3 |
 | color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
 | width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |