github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: progress support custom line-gradiend

pull/1845/head
tangjinzhou 2020-02-22 19:54:40 +08:00
parent c250fbf60c
commit f7ad7defe5
16 changed files with 390 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/config.js
View File

@ -1,5 +1,5 @@
module.exports = {
dev: {
componentName: 'popover', // dev components
componentName: 'progress', // dev components
},
};

185
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,31 +5,31 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="75%" class="ant-progress-text">75%</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span class="ant-progress-text"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
</div>
</div>
@ -40,11 +40,11 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="0%" class="ant-progress-text">0%</span></div>
</div>
<div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-icon-only"><i aria-label="icon: minus" class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
@ -61,31 +61,31 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="30%" class="ant-progress-text">30%</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span class="ant-progress-text"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
</div>
</div>
@ -96,11 +96,11 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="75%" class="ant-progress-text">75%</span></div>
</div>
</div>
@ -131,36 +131,91 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="75 Days" class="ant-progress-text">75 Days</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="Done" class="ant-progress-text">Done</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span class="ant-progress-text"><span style="color: red;">75</span></span></div>
</div>
</div>
`;
exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
<div>
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div>
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 99.9%; height: 8px; border-radius: 100px;"></div>
</div>
</div><span title="99.9%" class="ant-progress-text">99.9%</span>
</div>
</div>
<div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default">
<div>
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 99.9%; height: 8px; border-radius: 100px;"></div>
</div>
</div><span title="99.9%" class="ant-progress-text">99.9%</span>
</div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<defs>
<linearGradient id="ant-progress-gradient-11" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#108ee9"></stop>
<stop offset="100%" stop-color="#87d068"></stop>
</linearGradient>
</defs>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-11)" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 265.77873849369655px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="90%" class="ant-progress-text">90%</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<defs>
<linearGradient id="ant-progress-gradient-12" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#108ee9"></stop>
<stop offset="100%" stop-color="#87d068"></stop>
</linearGradient>
</defs>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-12)" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
</div>
</div>
`;
exports[`renders ./components/progress/demo/line.md correctly 1`] = `
<div>
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
@ -266,21 +321,21 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="75%" class="ant-progress-text">75%</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="75%" class="ant-progress-text">75%</span></div>
</div>
</div>
@ -293,7 +348,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 60%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 30%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div>
</div>
</div><span title="60%" class="ant-progress-text">60%</span>
</div>
@ -301,27 +356,27 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -88.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -88.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="60%" class="ant-progress-text">60%</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -103.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -103.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="60%" class="ant-progress-text">60%</span></div>
</div>
</div>

12
components/progress/__tests__/__snapshots__/index.test.js.snap
View File

@ -4,11 +4,11 @@ exports[`Progress render format 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
</svg><span title="50%" class="ant-progress-text">50%</span></div>
</div>
`;
@ -31,7 +31,7 @@ exports[`Progress render negetive successPercent 1`] = `
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
</div>
</div><span title="50%" class="ant-progress-text">50%</span>
</div>
@ -44,7 +44,7 @@ exports[`Progress render negetive successPercent 2`] = `
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 10%; height: 8px; border-radius: 100px;"></div>
<div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
</div>
</div><span title="50 10" class="ant-progress-text">50 10</span>
</div>

11
components/progress/circle.jsx
View File

@ -44,14 +44,21 @@ const Circle = {
const circleWidth = strokeWidth || 6;
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
const gapDeg = gapDegree || (type === 'dashboard' && 75);
const strokeColor = getStrokeColor(props);
const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
const wrapperClassName = {
[`${prefixCls}-inner`]: true,
[`${prefixCls}-circle-gradient`]: isGradient,
};
return (
<div class={`${prefixCls}-inner`} style={circleStyle}>
<div class={wrapperClassName} style={circleStyle}>
<VCCircle
percent={getPercentage(props)}
strokeWidth={circleWidth}
trailWidth={circleWidth}
strokeColor={getStrokeColor(props)}
strokeColor={strokeColor}
strokeLinecap={strokeLinecap}
trailColor={trailColor}
prefixCls={prefixCls}

47
components/progress/demo/gradient-line.md Normal file
View File

@ -0,0 +1,47 @@
<cn>
#### 自定义进度条渐变色
`linear-gradient` 的封装。推荐只传两种颜色。
</cn>
<us>
#### Custom line gradient
A package of `linear-gradient`. It is recommended to only pass two colors.
</us>
```tpl
<template>
<div>
<a-progress
:strokeColor="{
'0%': '#108ee9',
'100%': '#87d068',
}"
:percent="99.9"
/>
<a-progress
:strokeColor="{
from: '#108ee9',
to: '#87d068',
}"
:percent="99.9"
status="active"
/>
<a-progress
type="circle"
:strokeColor="{
'0%': '#108ee9',
'100%': '#87d068',
}"
:percent="90"
/>
<a-progress
type="circle"
:strokeColor="{
'0%': '#108ee9',
'100%': '#87d068',
}"
:percent="100"
/>
</div>
</template>
```

13
components/progress/demo/index.vue
View File

@ -9,6 +9,7 @@ import Dynamic from './dynamic.md';
import Dashboard from './dashboard.md';
import Segment from './segment.md';
import Linecap from './linecap.md';
import GradientLine from './gradient-line';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@ -40,27 +41,17 @@ export default {
return (
<div>
<md cn={md.cn} us={md.us} />
<br />
<Line />
<br />
<Circle />
<br />
<LineMini />
<br />
<CircleMini />
<br />
<CircleDynamic />
<br />
<Format />
<br />
<Dynamic />
<br />
<Dashboard />
<br />
<Segment />
<br />
<Linecap />
<br />
<GradientLine />
<api>
<template slot="cn">
<CN />

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

@ -8,23 +8,25 @@ Properties that shared by all types.
| format | template function of the content | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
| percent | to set the completion percentage | number | 0 |
| showInfo | whether to display the progress value and the status icon | boolean | true |
| status | to set the status of the Progress, options: `success` `exception` `active` `normal` | string | - |
| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
| strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
| strokeColor | color of progress bar | string | - |
| successPercent | segmented success percent | number | 0 |
### `type="line"`
| Property | Description | Type | Default |
| ----------- | ------------------------------------------------ | ------ | ------- |
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 | |
| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
### `type="circle"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 | |
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 | |
| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - | 1.5.0 |
### `type="dashboard"`

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

@ -8,23 +8,25 @@
| format | 内容的模板函数 | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
| percent | 百分比 | number | 0 |
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
| status | 状态，可选：`success` `exception` `active` `normal` | string | - |
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
| strokeLinecap | | Enum{ 'round', 'square' } | `round` |
| strokeColor | 进度条的色彩 | string | - |
| successPercent | 已完成的分段百分比 | number | 0 |
### `type="line"`
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ----------------------- | ------ | ------ |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 | |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
### `type="circle"`
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------ | ------ | ------ |
| width | 圆形进度条画布宽度，单位 px | number | 132 |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| width | 圆形进度条画布宽度，单位 px | number | 132 | |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | 1.5.0 |
### `type="dashboard"`

61
components/progress/line.jsx
View File

@ -1,5 +1,55 @@
import { validProgress } from './utils';
/**
* {
* '0%': '#afc163',
* '75%': '#009900',
* '50%': 'green', ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
* '25%': '#66FF00',
* '100%': '#ffffff'
* }
*/
export const sortGradient = gradients => {
let tempArr = [];
// eslint-disable-next-line no-restricted-syntax
for (const [key, value] of Object.entries(gradients)) {
const formatKey = parseFloat(key.replace(/%/g, ''));
if (isNaN(formatKey)) {
return {};
}
tempArr.push({
key: formatKey,
value,
});
}
tempArr = tempArr.sort((a, b) => a.key - b.key);
return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
};
/**
* {
* '0%': '#afc163',
* '25%': '#66FF00',
* '50%': '#00CC00', ====> linear-gradient(to right, #afc163 0%, #66FF00 25%,
* '75%': '#009900', #00CC00 50%, #009900 75%, #ffffff 100%)
* '100%': '#ffffff'
* }
*
* Then this man came to realize the truth:
* Besides six pence, there is the moon.
* Besides bread and butter, there is the bug.
* And...
* Besides women, there is the code.
*/
export const handleGradient = strokeColor => {
const { from = '#1890ff', to = '#1890ff', direction = 'to right', ...rest } = strokeColor;
if (Object.keys(rest).length !== 0) {
const sortedGradients = sortGradient(rest);
return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` };
}
return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
};
const Line = {
functional: true,
render(h, context) {
@ -13,16 +63,25 @@ const Line = {
strokeColor,
strokeLinecap,
} = props;
let backgroundProps;
if (strokeColor && typeof strokeColor !== 'string') {
backgroundProps = handleGradient(strokeColor);
} else {
backgroundProps = {
background: strokeColor,
};
}
const percentStyle = {
width: `${validProgress(percent)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
background: strokeColor,
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
...backgroundProps,
};
const successPercentStyle = {
width: `${validProgress(successPercent)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
borderRadius: strokeLinecap === 'square' ? 0 : '',
};
const successSegment =
successPercent !== undefined ? (

33
components/progress/progress.jsx
View File

@ -11,7 +11,7 @@ function addUnit(num, unit) {
const unitType = unit || 'px';
return num ? num + unitType : null;
}
const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
export const ProgressSize = PropTypes.oneOf(['default', 'small']);
@ -21,11 +21,11 @@ export const ProgressProps = {
percent: PropTypes.number,
successPercent: PropTypes.number,
format: PropTypes.func,
status: PropTypes.oneOf(['normal', 'success', 'active', 'exception']),
status: PropTypes.oneOf(ProgressStatuses),
showInfo: PropTypes.bool,
strokeWidth: PropTypes.number,
strokeLinecap: PropTypes.oneOf(['round', 'square']),
strokeColor: PropTypes.string,
strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
trailColor: PropTypes.string,
width: PropTypes.number,
gapDegree: PropTypes.number,
@ -48,6 +48,21 @@ export default {
configProvider: { default: () => ConfigConsumerProps },
},
methods: {
getPercentNumber() {
const { successPercent, percent = 0 } = this.$props;
return parseInt(
successPercent !== undefined ? successPercent.toString() : percent.toString(),
10,
);
},
getProgressStatus() {
const { status } = this.$props;
if (ProgressStatuses.indexOf(status) < 0 && this.getPercentNumber() >= 100) {
return 'success';
}
return status || 'normal';
},
renderProcessInfo(prefixCls, progressStatus) {
const { showInfo, format, type, percent, successPercent } = this.$props;
if (!showInfo) return null;
@ -96,15 +111,11 @@ export default {
} = props;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('progress', customizePrefixCls);
const progressStatus =
parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >=
100 && !('status' in props)
? 'success'
: status || 'normal';
let progress;
const progressStatus = this.getProgressStatus();
const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
let progress;
// Render progress shape
if (type === 'line') {
const lineProps = {

3
components/progress/utils.js
View File

@ -1,7 +1,8 @@
export function validProgress(progress) {
if (!progress || progress < 0) {
return 0;
} else if (progress > 100) {
}
if (progress > 100) {
return 100;
}
return progress;

2
components/vc-progress/index.js
View File

@ -1,4 +1,4 @@
// based on rc-progress 2.3.0
// based on rc-progress 2.5.2
import Progress, { Line, Circle } from './src/';
export { Line, Circle };

135
components/vc-progress/src/Circle.js
View File

@ -18,53 +18,68 @@ const circleDefaultProps = {
Vue.use(ref, { name: 'ant-ref' });
let gradientSeed = 0;
function stripPercentToNumber(percent) {
return +percent.replace('%', '');
}
function toArray(symArray) {
return Array.isArray(symArray) ? symArray : [symArray];
}
function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
const radius = 50 - strokeWidth / 2;
let beginPositionX = 0;
let beginPositionY = -radius;
let endPositionX = 0;
let endPositionY = -2 * radius;
switch (gapPosition) {
case 'left':
beginPositionX = -radius;
beginPositionY = 0;
endPositionX = 2 * radius;
endPositionY = 0;
break;
case 'right':
beginPositionX = radius;
beginPositionY = 0;
endPositionX = -2 * radius;
endPositionY = 0;
break;
case 'bottom':
beginPositionY = radius;
endPositionY = 2 * radius;
break;
default:
}
const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
const len = Math.PI * 2 * radius;
const pathStyle = {
stroke: strokeColor,
strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
transition:
'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
};
return {
pathString,
pathStyle,
};
}
const Circle = {
props: initDefaultProps(circlePropTypes, circleDefaultProps),
created() {
this.paths = {};
this.gradientId = gradientSeed;
gradientSeed += 1;
},
methods: {
getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
const radius = 50 - strokeWidth / 2;
let beginPositionX = 0;
let beginPositionY = -radius;
let endPositionX = 0;
let endPositionY = -2 * radius;
switch (gapPosition) {
case 'left':
beginPositionX = -radius;
beginPositionY = 0;
endPositionX = 2 * radius;
endPositionY = 0;
break;
case 'right':
beginPositionX = radius;
beginPositionY = 0;
endPositionX = -2 * radius;
endPositionY = 0;
break;
case 'bottom':
beginPositionY = radius;
endPositionY = 2 * radius;
break;
default:
}
const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
const len = Math.PI * 2 * radius;
const pathStyle = {
stroke: strokeColor,
strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
transition:
'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
};
return {
pathString,
pathStyle,
};
},
getStokeList() {
const {
prefixCls,
@ -75,13 +90,17 @@ const Circle = {
gapDegree,
gapPosition,
} = this.$props;
const percentList = Array.isArray(percent) ? percent : [percent];
const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
const percentList = toArray(percent);
const strokeColorList = toArray(strokeColor);
let stackPtg = 0;
return percentList.map((ptg, index) => {
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
const { pathString, pathStyle } = this.getPathStyles(
const stroke =
Object.prototype.toString.call(color) === '[object Object]'
? `url(#${prefixCls}-gradient-${this.gradientId})`
: '';
const { pathString, pathStyle } = getPathStyles(
stackPtg,
ptg,
color,
@ -96,6 +115,7 @@ const Circle = {
key: index,
attrs: {
d: pathString,
stroke,
'stroke-linecap': strokeLinecap,
'stroke-width': ptg === 0 ? 0 : strokeWidth,
'fill-opacity': '0',
@ -125,9 +145,10 @@ const Circle = {
gapPosition,
trailColor,
strokeLinecap,
strokeColor,
...restProps
} = this.$props;
const { pathString, pathStyle } = this.getPathStyles(
const { pathString, pathStyle } = getPathStyles(
0,
100,
trailColor,
@ -136,7 +157,10 @@ const Circle = {
gapPosition,
);
delete restProps.percent;
delete restProps.strokeColor;
const strokeColorList = toArray(strokeColor);
const gradient = strokeColorList.find(
color => Object.prototype.toString.call(color) === '[object Object]',
);
const pathFirst = {
attrs: {
d: pathString,
@ -151,8 +175,25 @@ const Circle = {
return (
<svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
{gradient && (
<defs>
<linearGradient
id={`${prefixCls}-gradient-${this.gradientId}`}
x1="100%"
y1="0%"
x2="0%"
y2="0%"
>
{Object.keys(gradient)
.sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
.map((key, index) => (
<stop key={index} offset={key} stop-color={gradient[key]} />
))}
</linearGradient>
</defs>
)}
<path {...pathFirst} />
{this.getStokeList()}
{this.getStokeList().reverse()}
</svg>
);
},

2
components/vc-progress/src/Line.js
View File

@ -20,6 +20,7 @@ const Line = {
strokeWidth,
trailColor,
trailWidth,
transition,
...restProps
} = this.$props;
@ -59,6 +60,7 @@ const Line = {
strokeDasharray: `${ptg}px, 100px`,
strokeDashoffset: `-${stackPtg}px`,
transition:
transition ||
'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
};
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];

6
components/vc-progress/src/types.js
View File

@ -17,7 +17,11 @@ export const propTypes = {
// className: PropTypes.string,
percent: PropTypes.oneOfType([mixedType, PropTypes.arrayOf(mixedType)]),
prefixCls: PropTypes.string,
strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
strokeColor: PropTypes.oneOfType([
PropTypes.string,
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
PropTypes.object,
]),
strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
strokeWidth: mixedType,
// style: PropTypes.object,

7
types/progress.d.ts vendored
View File

@ -4,6 +4,9 @@
import { AntdComponent } from './component';
export type StringGradients = { [percentage: string]: string };
type FromToGradients = { from: string; to: string };
export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
export declare class Progress extends AntdComponent {
/**
* template function of the content
@ -60,13 +63,13 @@ export declare class Progress extends AntdComponent {
* @default 'round'
* @type Enum{ 'round', 'square' }
*/
strokeLinecap: 'round' | 'square';
strokeLinecap: 'butt' | 'square' | 'round';
/**
* color of progress bar
* @type string
*/
strokeColor: string;
strokeColor: string | ProgressGradient;
/**
* segmented success percent, works when type="line"