mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 Packages Projects Releases Wiki Activity

feat: Progress.Circle support conic (#44404)

Browse Source 
* feat: support conic

* test: update snapshot

* docs: update doc

* chore: clean up

* docs: update doc

* test: update snapshot

* test: update snapshot

* test: update snapshot
This commit is contained in:
二货爱吃白萝卜 2023-08-25 00:28:38 +08:00 committed by GitHub
parent dd5628b730
commit d373bf3d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 1608 additions and 929 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1058
components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

1058
components/progress/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

140
components/progress/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -13,36 +13,36 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(237.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(237.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 53.31980864842677px 295.3097094374406; stroke-dashoffset: 53.309808648426774; transform: rotate(237.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -68,36 +68,36 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(238deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(238deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 52.499503899989435px 295.3097094374406; stroke-dashoffset: 52.48950389998944; transform: rotate(238deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -123,36 +123,36 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -388,36 +388,36 @@ exports[`Progress render strokeColor 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: red; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: red; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -500,36 +500,36 @@ exports[`Progress render strokeWidth of progress 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="25"
stroke-linecap="round"
stroke-width="50"
style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="25"
stroke-linecap="round"
stroke-width="50"
style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 134.95574287564276; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 134.95574287564276; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="25"
stroke-linecap="round"
stroke-width="50"
style="stroke: #52C41A; stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 157.06963267948967; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 157.07963267948966px 157.07963267948966; stroke-dashoffset: 157.06963267948967; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -588,36 +588,36 @@ exports[`Progress render successColor progress type="circle" 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(18deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #ffffff; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #ffffff; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 209.7167966062084; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -643,36 +643,36 @@ exports[`Progress render successColor progress type="dashboard" 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(213deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="47"
stroke-linecap="round"
stroke-width="6"
style="stroke: #ffffff; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #ffffff; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 166.6507973132483; transform: rotate(127.5deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span

4
components/progress/demo/gradient-line.md
View File

@ -1,7 +1,7 @@
## zh-CN
`linear-gradient` 的封装。推荐只传两种颜色。
渐变色封装，`circle` 与 `dashboard` 设置渐变时 `strokeLinecap` 会被忽略。
## en-US
A package of `linear-gradient`. It is recommended to only pass two colors.
Gradient encapsulation, `circle` and `dashboard` will ignore `strokeLinecap` when setting gradient.

19
components/progress/demo/gradient-line.tsx
View File

@ -1,15 +1,24 @@
import React from 'react';
import { Progress, Space } from 'antd';
const twoColors = { '0%': '#108ee9', '100%': '#87d068' };
const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
const App: React.FC = () => (
<>
<Progress percent={99.9} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<Progress percent={99.9} strokeColor={twoColors} />
<Progress percent={99.9} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
<Space wrap>
<Progress type="circle" percent={90} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
<Progress type="circle" percent={100} strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }} />
<Progress type="circle" percent={90} strokeColor={twoColors} />
<Progress type="circle" percent={100} strokeColor={twoColors} />
<Progress type="circle" percent={93} strokeColor={conicColors} />
</Space>
</>
<Space wrap>
<Progress type="dashboard" percent={90} strokeColor={twoColors} />
<Progress type="dashboard" percent={100} strokeColor={twoColors} />
<Progress type="dashboard" percent={93} strokeColor={conicColors} />
</Space>
</div>
);
export default App;

2
components/progress/index.en-US.md
View File

@ -65,7 +65,7 @@ Properties that shared by all types.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - |
| strokeColor | The color of circular progress, render gradient when passing an object | string \| { number%: string } | - | - |
| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - |
### `type="dashboard"`

2
components/progress/index.zh-CN.md
View File

@ -66,7 +66,7 @@ demo:
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
### `type="dashboard"`

12
components/progress/progress.tsx
View File

@ -1,10 +1,11 @@
import * as React from 'react';
import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
import CheckOutlined from '@ant-design/icons/CheckOutlined';
import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import warning from '../_util/warning';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
@ -15,10 +16,11 @@ import useStyle from './style';
import { getSize, getSuccessPercent, validProgress } from './utils';
export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
export type ProgressType = (typeof ProgressTypes)[number];
export type ProgressType = typeof ProgressTypes[number];
const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
export type ProgressSize = 'default' | 'small';
export type StringGradients = { [percentage: string]: string };
export type StringGradients = Record<string, string>;
type FromToGradients = { from: string; to: string };
export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
@ -38,7 +40,7 @@ export interface ProgressProps extends ProgressAriaProps {
type?: ProgressType;
percent?: number;
format?: (percent?: number, successPercent?: number) => React.ReactNode;
status?: (typeof ProgressStatuses)[number];
status?: typeof ProgressStatuses[number];
showInfo?: boolean;
strokeWidth?: number;
strokeLinecap?: 'butt' | 'square' | 'round';
@ -82,7 +84,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
);
}, [percent, props.success, props.successPercent]);
const progressStatus = React.useMemo<(typeof ProgressStatuses)[number]>(() => {
const progressStatus = React.useMemo<typeof ProgressStatuses[number]>(() => {
if (!ProgressStatuses.includes(status!) && percentNumber >= 100) {
return 'success';
}

120
components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2606,36 +2606,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -3377,36 +3377,36 @@ exports[`renders components/steps/demo/progress.tsx extend context correctly 1`]
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 122.63715789784806; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -3627,36 +3627,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -3810,36 +3810,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -3993,36 +3993,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span
@ -4176,36 +4176,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
style="stroke: #52C41A; stroke-dasharray: 301.59289474462014px 301.59289474462014; stroke-dashoffset: 301.58289474462015; transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
/>
</svg>
<span

120
components/steps/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -2266,36 +2266,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
</svg>
<span
@ -3033,36 +3033,36 @@ exports[`renders components/steps/demo/progress.tsx correctly 1`] = `
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="1"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:122.63715789784806;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
</svg>
<span
@ -3281,36 +3281,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
</svg>
<span
@ -3464,36 +3464,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
</svg>
<span
@ -3647,36 +3647,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
</svg>
<span
@ -3830,36 +3830,36 @@ Array [
<svg
class="ant-progress-circle"
role="presentation"
viewBox="-50 -50 100 100"
viewBox="0 0 100 100"
>
<circle
class="ant-progress-circle-trail"
cx="0"
cy="0"
cx="50"
cy="50"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
<circle
class="ant-progress-circle-path"
cx="0"
cy="0"
cx="50"
cy="50"
opacity="0"
r="48"
stroke-linecap="round"
stroke-width="4"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
style="stroke:#52C41A;stroke-dasharray:301.59289474462014px 301.59289474462014;stroke-dashoffset:301.58289474462015;transform:rotate(-90deg);transform-origin:50px 50px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
/>
</svg>
<span

2
package.json
View File

@ -139,7 +139,7 @@
"rc-notification": "~5.0.4",
"rc-pagination": "~3.6.0",
"rc-picker": "~3.13.0",
"rc-progress": "~3.4.1",
"rc-progress": "~3.5.1",
"rc-rate": "~2.12.0",
"rc-resize-observer": "^1.2.0",
"rc-segmented": "~2.2.0",