tusen-ai · zhengdaonian · Feb 25, 2025 · Mar 10, 2025 · Apr 17, 2025
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-progress` add `size` props. closes [#6650](https://github.com/tusen-ai/naive-ui/issues/6650)
+- `n-progress` add `indeterminate`, `duration` props. closes [#6786](https://github.com/tusen-ai/naive-ui/issues/6786)
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-progress` 新增 `size` 参数. 关闭 [#6650](https://github.com/tusen-ai/naive-ui/issues/6650)
+- `n-progress` 新增 `indeterminate`, `duration` 参数. closes [#6786](https://github.com/tusen-ai/naive-ui/issues/6786)
+
 ## 2.41.0
 
 `2025-01-05`

diff --git a/src/progress/demos/enUS/indeterminate.demo.vue b/src/progress/demos/enUS/indeterminate.demo.vue
@@ -0,0 +1,15 @@
+<markdown>
+# Indeterminate progress
+
+Use  `indeterminate` attribute to set indeterminate progress, with `duration` to control the animation duration.
+</markdown>
+
+<template>
+  <n-progress
+    type="line"
+    :percentage="60"
+    indicator-placement="inside"
+    indeterminate
+    :duration="5"
+  />
+</template>
diff --git a/src/progress/demos/enUS/index.demo-entry.md b/src/progress/demos/enUS/index.demo-entry.md
@@ -16,6 +16,8 @@ no-indicator.vue
 height.vue
 processing.vue
 gradient.vue
+size.vue
+indeterminate.vue
 ```
 
 ## API
@@ -42,7 +44,10 @@ gradient.vue
 | status | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` | Progress status. |  |
 | stroke-width | `number` | `7` | Progress width. |  |
 | type | `'line' \| 'circle' \| 'multiple-circle' \| 'dashboard'` | `line` | Progress type. | `'dashboard'` 2.25.2 |
+| indeterminate | `boolean` | `false` | set indeterminate progress | 2.41.1 |
+| duration | `number` | `3` | control the animation duration of indeterminate progress or striped flow progress | 2.41.1 |
 | unit | `string` | `%` | Progress unit. |  |
+| size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Progress size. | 2.41.1 |
 
 ### Progress Slots
 

diff --git a/src/progress/demos/enUS/size.demo.vue b/src/progress/demos/enUS/size.demo.vue
@@ -0,0 +1,100 @@
+<markdown>
+# Size
+
+Progress can be `tiny` `small`, `medium` and `large` in size.
+</markdown>
+
+<script lang="ts" setup>
+import type { ProgressSize } from 'naive-ui'
+import { ref } from 'vue'
+
+const size = ref<ProgressSize>('medium')
+
+const percentage = ref(40)
+
+function add() {
+  percentage.value += 10
+  if (percentage.value > 100) {
+    percentage.value = 0
+  }
+}
+
+function minus() {
+  percentage.value -= 10
+  if (percentage.value < 0) {
+    percentage.value = 100
+  }
+}
+</script>
+
+<template>
+  <n-space vertical>
+    <n-radio-group v-model:value="size">
+      <n-space>
+        <n-radio value="tiny">
+          Small Small
+        </n-radio>
+        <n-radio value="small">
+          Small
+        </n-radio>
+        <n-radio value="medium">
+          Not Small
+        </n-radio>
+        <n-radio value="large">
+          Not Not Small
+        </n-radio>
+      </n-space>
+    </n-radio-group>
+
+    <n-progress type="line" :size="size" :percentage="percentage" />
+
+    <n-progress type="circle" :size="size" :percentage="percentage" />
+
+    <n-progress
+      type="dashboard"
+      :size="size"
+      gap-position="bottom"
+      :percentage="percentage"
+    />
+
+    <n-el>
+      <n-progress
+        type="multiple-circle"
+        :size="size"
+        :stroke-width="6"
+        :circle-gap="0.5"
+        :percentage="[
+          percentage,
+          (percentage + 10) % 100,
+          (percentage + 20) % 100,
+          (percentage + 30) % 100,
+        ]"
+        :color="[
+          'var(--info-color)',
+          'var(--success-color)',
+          'var(--warning-color)',
+          'var(--error-color)',
+        ]"
+        :rail-style="[
+          { stroke: 'var(--info-color)', opacity: 0.3 },
+          { stroke: 'var(--success-color)', opacity: 0.3 },
+          { stroke: 'var(--warning-color)', opacity: 0.3 },
+          { stroke: 'var(--error-color)', opacity: 0.3 },
+        ]"
+      >
+        <div style="text-align: center">
+          圈圈赛跑！
+        </div>
+      </n-progress>
+    </n-el>
+
+    <n-space>
+      <n-button @click="minus">
+        减 10%
+      </n-button>
+      <n-button @click="add">
+        加 10%
+      </n-button>
+    </n-space>
+  </n-space>
+</template>
diff --git a/src/progress/demos/zhCN/indeterminate.demo.vue b/src/progress/demos/zhCN/indeterminate.demo.vue
@@ -0,0 +1,15 @@
+<markdown>
+# 动画进度条
+
+使用 `indeterminate` 属性来设置不确定的进度， `duration` 来控制动画持续时间
+</markdown>
+
+<template>
+  <n-progress
+    type="line"
+    :percentage="60"
+    indicator-placement="inside"
+    indeterminate
+    :duration="5"
+  />
+</template>
diff --git a/src/progress/demos/zhCN/index.demo-entry.md b/src/progress/demos/zhCN/index.demo-entry.md
@@ -16,6 +16,8 @@ no-indicator.vue
 height.vue
 processing.vue
 gradient.vue
+size.vue
+indeterminate.vue
 ```
 
 ## API
@@ -42,7 +44,10 @@ gradient.vue
 | status | `'default' \| 'success' \| 'error' \| 'warning' \| 'info'` | `'default'` | 进度条状态 |  |
 | stroke-width | `number` | `7` | 进度条宽度 |  |
 | type | `'line' \| 'circle' \| 'multiple-circle' \| 'dashboard'` | `'line'` | 进度条类型 | `'dashboard'` 2.25.2 |
+| indeterminate | `boolean` | `false` | 是否为动画进度条 | 2.41.1 |
+| duration | `number` | `3` | 控制动画进度条速度和条纹进度条流动速度 | 2.41.1 |
 | unit | `string` | `%` | 进度条单位 |  |
+| size | `'tiny' \| 'small' \| 'medium' \| 'large'` | `'medium'` | 组件尺寸 | 2.41.1 |
 
 ### Progress Slots
 

diff --git a/src/progress/demos/zhCN/size.demo.vue b/src/progress/demos/zhCN/size.demo.vue
@@ -0,0 +1,100 @@
+<markdown>
+# 尺寸
+
+有 `tiny` `small`、`medium` 和 `large` 尺寸。
+</markdown>
+
+<script lang="ts" setup>
+import type { ProgressSize } from 'naive-ui'
+import { ref } from 'vue'
+
+const size = ref<ProgressSize>('medium')
+
+const percentage = ref(40)
+
+function add() {
+  percentage.value += 10
+  if (percentage.value > 100) {
+    percentage.value = 0
+  }
+}
+
+function minus() {
+  percentage.value -= 10
+  if (percentage.value < 0) {
+    percentage.value = 100
+  }
+}
+</script>
+
+<template>
+  <n-space vertical>
+    <n-radio-group v-model:value="size">
+      <n-space>
+        <n-radio value="tiny">
+          很小
+        </n-radio>
+        <n-radio value="small">
+          小
+        </n-radio>
+        <n-radio value="medium">
+          不小
+        </n-radio>
+        <n-radio value="large">
+          不不小
+        </n-radio>
+      </n-space>
+    </n-radio-group>
+
+    <n-progress type="line" :size="size" :percentage="percentage" />
+
+    <n-progress type="circle" :size="size" :percentage="percentage" />
+
+    <n-progress
+      type="dashboard"
+      :size="size"
+      gap-position="bottom"
+      :percentage="percentage"
+    />
+
+    <n-el>
+      <n-progress
+        type="multiple-circle"
+        :size="size"
+        :stroke-width="6"
+        :circle-gap="0.5"
+        :percentage="[
+          percentage,
+          (percentage + 10) % 100,
+          (percentage + 20) % 100,
+          (percentage + 30) % 100,
+        ]"
+        :color="[
+          'var(--info-color)',
+          'var(--success-color)',
+          'var(--warning-color)',
+          'var(--error-color)',
+        ]"
+        :rail-style="[
+          { stroke: 'var(--info-color)', opacity: 0.3 },
+          { stroke: 'var(--success-color)', opacity: 0.3 },
+          { stroke: 'var(--warning-color)', opacity: 0.3 },
+          { stroke: 'var(--error-color)', opacity: 0.3 },
+        ]"
+      >
+        <div style="text-align: center">
+          圈圈赛跑！
+        </div>
+      </n-progress>
+    </n-el>
+
+    <n-space>
+      <n-button @click="minus">
+        减 10%
+      </n-button>
+      <n-button @click="add">
+        加 10%
+      </n-button>
+    </n-space>
+  </n-space>
+</template>
diff --git a/src/progress/src/Line.tsx b/src/progress/src/Line.tsx
@@ -59,7 +59,8 @@ export default defineComponent({
     },
     height: [String, Number],
     railBorderRadius: [String, Number],
-    fillBorderRadius: [String, Number]
+    fillBorderRadius: [String, Number],
+    indeterminate: Boolean
   },
   setup(props, { slots }) {
     const styleHeightRef = computed(() => {
@@ -102,6 +103,7 @@ export default defineComponent({
         status,
         showIndicator,
         processing,
+        indeterminate,
         clsPrefix
       } = props
       return (
@@ -133,7 +135,9 @@ export default defineComponent({
                   class={[
                     `${clsPrefix}-progress-graph-line-fill`,
                     processing
-                    && `${clsPrefix}-progress-graph-line-fill--processing`
+                    && `${clsPrefix}-progress-graph-line-fill--processing`,
+                    indeterminate
+                    && `${clsPrefix}-progress-graph-line-fill--indeterminate`
                   ]}
                   style={{
                     maxWidth: `${props.percentage}%`,