mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

fix: Progress circle tooltip position (#48686)

Browse Source
This commit is contained in:
afc163 2024-04-29 11:21:33 +08:00 committed by GitHub
parent 786dfc0339
commit ce43007de4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 353 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/progress/Circle.tsx
View File

@ -82,9 +82,7 @@ const Circle: React.FC<CircleProps> = (props) => {
return ( return (
<div className={wrapperClassName} style={circleStyle}> <div className={wrapperClassName} style={circleStyle}>
{width <= 20 ? ( {width <= 20 ? (
<Tooltip title={children}> <Tooltip title={children}>{circleContent}</Tooltip>
<span>{circleContent}</span>
</Tooltip>
) : ( ) : (
<> <>
{circleContent} {circleContent}

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

@ -213,44 +213,42 @@ exports[`renders components/progress/demo/circle-micro.tsx extend context correc
class="ant-progress-inner" class="ant-progress-inner"
style="width: 14px; height: 14px; font-size: 8.1px;" style="width: 14px; height: 14px; font-size: 8.1px;"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="40"
r="40" stroke="#e6f4ff"
stroke="#e6f4ff" stroke-linecap="round"
stroke-linecap="round" stroke-width="20"
stroke-width="20" style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; 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;"
style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="40"
r="40" stroke-linecap="round"
stroke-linecap="round" stroke-width="20"
stroke-width="20" style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; 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;"
style="stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 110.53096491487338; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="40"
r="40" stroke-linecap="round"
stroke-linecap="round" stroke-width="20"
stroke-width="20" style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; 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;"
style="stroke: #52C41A; stroke-dasharray: 251.32741228718345px 251.32741228718345; stroke-dashoffset: 251.31741228718346; 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>
</svg>
</span>
<div <div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top" class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@ -998,43 +996,41 @@ Array [
class="ant-progress-inner" class="ant-progress-inner"
style="width: 20px; height: 20px; font-size: 9px;" style="width: 20px; height: 20px; font-size: 9px;"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 267.0353755551324px 267.0353755551324; 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;"
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; 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;"
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; 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;"
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; 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>
</svg>
</span>
<div <div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top" class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@ -1193,43 +1189,41 @@ Array [
class="ant-progress-inner" class="ant-progress-inner"
style="width: 20px; height: 20px; font-size: 9px;" style="width: 20px; height: 20px; font-size: 9px;"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 211.40300564781316px 267.0353755551324; 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;"
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; 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;"
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; 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;" />
/> <circle
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; 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;"
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; 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>
</svg>
</span>
<div <div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top" class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@ -3165,43 +3159,41 @@ exports[`renders components/progress/demo/size.tsx extend context correctly 1`]
class="ant-progress-inner" class="ant-progress-inner"
style="width: 20px; height: 20px; font-size: 9px;" style="width: 20px; height: 20px; font-size: 9px;"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 267.0353755551324px 267.0353755551324; 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;"
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; 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;"
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; 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;"
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; 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>
</svg>
</span>
<div <div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top" class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
@ -3346,43 +3338,41 @@ exports[`renders components/progress/demo/size.tsx extend context correctly 1`]
class="ant-progress-inner" class="ant-progress-inner"
style="width: 20px; height: 20px; font-size: 9px;" style="width: 20px; height: 20px; font-size: 9px;"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 211.40300564781316px 267.0353755551324; 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;"
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; 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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; 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;"
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; 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;" />
/> <circle
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; 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;"
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; 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>
</svg>
</span>
<div <div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top" class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"

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

@ -211,44 +211,42 @@ exports[`renders components/progress/demo/circle-micro.tsx correctly 1`] = `
class="ant-progress-inner" class="ant-progress-inner"
style="width:14px;height:14px;font-size:8.1px" style="width:14px;height:14px;font-size:8.1px"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="40"
r="40" stroke="#e6f4ff"
stroke="#e6f4ff" stroke-linecap="round"
stroke-linecap="round" stroke-width="20"
stroke-width="20" style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;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"
style="stroke:#e6f4ff;stroke-dasharray:251.32741228718345px 251.32741228718345;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="40"
r="40" stroke-linecap="round"
stroke-linecap="round" stroke-width="20"
stroke-width="20" style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;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"
style="stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:110.53096491487338;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="40"
r="40" stroke-linecap="round"
stroke-linecap="round" stroke-width="20"
stroke-width="20" style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;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"
style="stroke:#52C41A;stroke-dasharray:251.32741228718345px 251.32741228718345;stroke-dashoffset:251.31741228718346;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>
</svg>
</span>
</div> </div>
</div> </div>
<span> <span>
@ -928,43 +926,41 @@ Array [
class="ant-progress-inner" class="ant-progress-inner"
style="width:20px;height:20px;font-size:9px" style="width:20px;height:20px;font-size:9px"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:267.0353755551324px 267.0353755551324;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"
style="stroke-dasharray:267.0353755551324px 267.0353755551324;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;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"
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;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"
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;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>
</svg>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -1099,43 +1095,41 @@ Array [
class="ant-progress-inner" class="ant-progress-inner"
style="width:20px;height:20px;font-size:9px" style="width:20px;height:20px;font-size:9px"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:211.40300564781316px 267.0353755551324;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"
style="stroke-dasharray:211.40300564781316px 267.0353755551324;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;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"
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;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"
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;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" />
/> </svg>
</svg>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -2972,43 +2966,41 @@ exports[`renders components/progress/demo/size.tsx correctly 1`] = `
class="ant-progress-inner" class="ant-progress-inner"
style="width:20px;height:20px;font-size:9px" style="width:20px;height:20px;font-size:9px"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:267.0353755551324px 267.0353755551324;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"
style="stroke-dasharray:267.0353755551324px 267.0353755551324;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;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"
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;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"
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;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>
</svg>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -3129,43 +3121,41 @@ exports[`renders components/progress/demo/size.tsx correctly 1`] = `
class="ant-progress-inner" class="ant-progress-inner"
style="width:20px;height:20px;font-size:9px" style="width:20px;height:20px;font-size:9px"
> >
<span> <svg
<svg class="ant-progress-circle"
class="ant-progress-circle" role="presentation"
role="presentation" viewBox="0 0 100 100"
viewBox="0 0 100 100" >
> <circle
<circle class="ant-progress-circle-trail"
class="ant-progress-circle-trail" cx="50"
cx="50" cy="50"
cy="50" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:211.40300564781316px 267.0353755551324;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"
style="stroke-dasharray:211.40300564781316px 267.0353755551324;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="1"
opacity="1" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;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"
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;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
<circle class="ant-progress-circle-path"
class="ant-progress-circle-path" cx="50"
cx="50" cy="50"
cy="50" opacity="0"
opacity="0" r="42.5"
r="42.5" stroke-linecap="round"
stroke-linecap="round" stroke-width="15"
stroke-width="15" style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;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"
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;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" />
/> </svg>
</svg>
</span>
</div> </div>
</div> </div>
</div> </div>