home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-20 18:26:46 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
gh-pages
ant-design/components/progress/index.html
T
afc163 340f90bafe Updates
2017-06-13 15:28:13 +08:00

285 lines
95 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL， `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
<!-- Hotjar Tracking Code for ant.design -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:473408,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1647091022"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.11.0" style="display:block;opacity:1;" data-reactid="28">2.11.0</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Guidelines</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Patterns</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resources</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="47"><a href="//mobile.ant.design" data-reactid="48"><span data-reactid="49">Mobile</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="50"><div class="ant-row" data-reactid="51"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="52"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="53"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/introduce" data-reactid="55">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/react/getting-started" data-reactid="57">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/react/practical-projects" data-reactid="59">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="/docs/react/use-with-create-react-app" data-reactid="61">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/react/customize-theme" data-reactid="63">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/changelog" data-reactid="65">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/react/recommendation" data-reactid="67">Third-Party Libraries</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/react/i18n" data-reactid="69">Internationalization</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="70"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="71"><h4 data-reactid="72">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="73"><li class=" ant-menu-item-group" data-reactid="74"><div class="ant-menu-item-group-title" data-reactid="75">General</div><ul class="ant-menu-item-group-list" data-reactid="76"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/components/button/" data-reactid="78"><span data-reactid="79">Button</span><span class="chinese" data-reactid="80"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/components/icon/" data-reactid="82"><span data-reactid="83">Icon</span><span class="chinese" data-reactid="84"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="85"><div class="ant-menu-item-group-title" data-reactid="86">Layout</div><ul class="ant-menu-item-group-list" data-reactid="87"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/components/grid/" data-reactid="89"><span data-reactid="90">Grid</span><span class="chinese" data-reactid="91"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="92"><a href="/components/layout/" data-reactid="93"><span data-reactid="94">Layout</span><span class="chinese" data-reactid="95"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="96"><div class="ant-menu-item-group-title" data-reactid="97">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="98"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="/components/affix/" data-reactid="100"><span data-reactid="101">Affix</span><span class="chinese" data-reactid="102"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="103"><a href="/components/breadcrumb/" data-reactid="104"><span data-reactid="105">Breadcrumb</span><span class="chinese" data-reactid="106"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="107"><a href="/components/back-top/" data-reactid="108"><span data-reactid="109">BackTop</span><span class="chinese" data-reactid="110"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="111"><a href="/components/dropdown/" data-reactid="112"><span data-reactid="113">Dropdown</span><span class="chinese" data-reactid="114"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="115"><a href="/components/menu/" data-reactid="116"><span data-reactid="117">Menu</span><span class="chinese" data-reactid="118"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="119"><a href="/components/pagination/" data-reactid="120"><span data-reactid="121">Pagination</span><span class="chinese" data-reactid="122"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="123"><a href="/components/steps/" data-reactid="124"><span data-reactid="125">Steps</span><span class="chinese" data-reactid="126"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="127"><a href="/components/tabs/" data-reactid="128"><span data-reactid="129">Tabs</span><span class="chinese" data-reactid="130"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="131"><div class="ant-menu-item-group-title" data-reactid="132">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="133"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="134"><a href="/components/auto-complete/" data-reactid="135"><span data-reactid="136">AutoComplete</span><span class="chinese" data-reactid="137"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="138"><a href="/components/cascader/" data-reactid="139"><span data-reactid="140">Cascader</span><span class="chinese" data-reactid="141"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="142"><a href="/components/checkbox/" data-reactid="143"><span data-reactid="144">Checkbox</span><span class="chinese" data-reactid="145"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="146"><a href="/components/date-picker/" data-reactid="147"><span data-reactid="148">DatePicker</span><span class="chinese" data-reactid="149"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="150"><a href="/components/form/" data-reactid="151"><span data-reactid="152">Form</span><span class="chinese" data-reactid="153"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="154"><a href="/components/input-number/" data-reactid="155"><span data-reactid="156">InputNumber</span><span class="chinese" data-reactid="157"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="158"><a href="/components/input/" data-reactid="159"><span data-reactid="160">Input</span><span class="chinese" data-reactid="161"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="162"><a href="/components/mention/" data-reactid="163"><span data-reactid="164">Mention</span><span class="chinese" data-reactid="165"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="166"><a href="/components/rate/" data-reactid="167"><span data-reactid="168">Rate</span><span class="chinese" data-reactid="169"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="170"><a href="/components/radio/" data-reactid="171"><span data-reactid="172">Radio</span><span class="chinese" data-reactid="173"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="174"><a href="/components/select/" data-reactid="175"><span data-reactid="176">Select</span><span class="chinese" data-reactid="177"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="178"><a href="/components/slider/" data-reactid="179"><span data-reactid="180">Slider</span><span class="chinese" data-reactid="181"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="182"><a href="/components/switch/" data-reactid="183"><span data-reactid="184">Switch</span><span class="chinese" data-reactid="185"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="186"><a href="/components/tree-select/" data-reactid="187"><span data-reactid="188">TreeSelect</span><span class="chinese" data-reactid="189"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="190"><a href="/components/time-picker/" data-reactid="191"><span data-reactid="192">TimePicker</span><span class="chinese" data-reactid="193"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="194"><a href="/components/transfer/" data-reactid="195"><span data-reactid="196">Transfer</span><span class="chinese" data-reactid="197"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="198"><a href="/components/upload/" data-reactid="199"><span data-reactid="200">Upload</span><span class="chinese" data-reactid="201"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="202"><div class="ant-menu-item-group-title" data-reactid="203">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="204"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="205"><a href="/components/avatar/" data-reactid="206"><span data-reactid="207">Avatar</span><span class="chinese" data-reactid="208"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="209"><a href="/components/badge/" data-reactid="210"><span data-reactid="211">Badge</span><span class="chinese" data-reactid="212"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="213"><a href="/components/collapse/" data-reactid="214"><span data-reactid="215">Collapse</span><span class="chinese" data-reactid="216"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="217"><a href="/components/calendar/" data-reactid="218"><span data-reactid="219">Calendar</span><span class="chinese" data-reactid="220"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="221"><a href="/components/card/" data-reactid="222"><span data-reactid="223">Card</span><span class="chinese" data-reactid="224"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="225"><a href="/components/carousel/" data-reactid="226"><span data-reactid="227">Carousel</span><span class="chinese" data-reactid="228"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="229"><a href="/components/popover/" data-reactid="230"><span data-reactid="231">Popover</span><span class="chinese" data-reactid="232"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="233"><a href="/components/tooltip/" data-reactid="234"><span data-reactid="235">Tooltip</span><span class="chinese" data-reactid="236"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="237"><a href="/components/table/" data-reactid="238"><span data-reactid="239">Table</span><span class="chinese" data-reactid="240"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="241"><a href="/components/tag/" data-reactid="242"><span data-reactid="243">Tag</span><span class="chinese" data-reactid="244"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="245"><a href="/components/timeline/" data-reactid="246"><span data-reactid="247">Timeline</span><span class="chinese" data-reactid="248"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="249"><a href="/components/tree/" data-reactid="250"><span data-reactid="251">Tree</span><span class="chinese" data-reactid="252"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="253"><div class="ant-menu-item-group-title" data-reactid="254">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="255"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="256"><a href="/components/alert/" data-reactid="257"><span data-reactid="258">Alert</span><span class="chinese" data-reactid="259"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260"><a href="/components/modal/" data-reactid="261"><span data-reactid="262">Modal</span><span class="chinese" data-reactid="263"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="264"><a href="/components/message/" data-reactid="265"><span data-reactid="266">Message</span><span class="chinese" data-reactid="267"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="268"><a href="/components/notification/" data-reactid="269"><span data-reactid="270">Notification</span><span class="chinese" data-reactid="271"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="272"><a href="/components/progress/" data-reactid="273"><span data-reactid="274">Progress</span><span class="chinese" data-reactid="275"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="276"><a href="/components/popconfirm/" data-reactid="277"><span data-reactid="278">Popconfirm</span><span class="chinese" data-reactid="279"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="280"><a href="/components/spin/" data-reactid="281"><span data-reactid="282">Spin</span><span class="chinese" data-reactid="283"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="284"><div class="ant-menu-item-group-title" data-reactid="285">Other</div><ul class="ant-menu-item-group-list" data-reactid="286"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="287"><a href="/components/anchor/" data-reactid="288"><span data-reactid="289">Anchor</span><span class="chinese" data-reactid="290"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="291"><a href="/components/locale-provider/" data-reactid="292"><span data-reactid="293">LocaleProvider</span><span class="chinese" data-reactid="294"></span></a></li></ul></li></ul></li></ul></div><div class="main-container main-container-component ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="295"><article data-reactid="296"><div class="toc-affix" data-reactid="297"><div class="" data-reactid="298"><ul class="toc demos-anchor" data-reactid="299"><li title="Progress bar" data-reactid="300"><a href="#components-progress-demo-line" data-reactid="301">Progress bar</a></li><li title="Circular progress bar" data-reactid="302"><a href="#components-progress-demo-circle" data-reactid="303">Circular progress bar</a></li><li title="Mini size progress bar" data-reactid="304"><a href="#components-progress-demo-line-mini" data-reactid="305">Mini size progress bar</a></li><li title="Mini size circular progress bar" data-reactid="306"><a href="#components-progress-demo-circle-mini" data-reactid="307">Mini size circular progress bar</a></li><li title="Dynamic circular progress bar" data-reactid="308"><a href="#components-progress-demo-circle-dynamic" data-reactid="309">Dynamic circular progress bar</a></li><li title="Dynamic" data-reactid="310"><a href="#components-progress-demo-dynamic" data-reactid="311">Dynamic</a></li><li title="Custom text format" data-reactid="312"><a href="#components-progress-demo-format" data-reactid="313">Custom text format</a></li><li title="Dashboard" data-reactid="314"><a href="#components-progress-demo-dashboard" data-reactid="315">Dashboard</a></li></ul></div></div><section class="markdown" data-reactid="316"><h1 data-reactid="317"><!-- react-text: 318 -->Progress<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/index.en-US.md" data-reactid="319"><i class="anticon anticon-edit" data-reactid="320"></i></a></h1><section class="markdown" data-reactid="321"><p data-reactid="322"><!-- react-text: 323 -->To display the current progress of an operation flow.<!-- /react-text --></p><h2 id="When-To-Use" data-reactid="324"><span data-reactid="325"><!-- react-text: 326 -->When To Use<!-- /react-text --></span><a href="#When-To-Use" class="anchor" data-reactid="327">#</a></h2><p data-reactid="328"><!-- react-text: 329 -->If it will take a long time to complete the operation, you can use <!-- /react-text --><code data-reactid="330"><!-- react-text: 331 -->Progress<!-- /react-text --></code><!-- react-text: 332 --> to show the current progress and status.<!-- /react-text --></p><ul data-reactid="333"><li data-reactid="334"><p data-reactid="335"><!-- react-text: 336 -->When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.<!-- /react-text --></p></li><li data-reactid="337"><p data-reactid="338"><!-- react-text: 339 -->When you need to display the completion percentage of an operation.<!-- /react-text --></p></li></ul></section><h2 data-reactid="340"><span data-reactid="341">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="342"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="343"><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="344"><section class="code-box" id="components-progress-demo-line" data-reactid="345"><section class="code-box-demo" data-reactid="346"><div data-reactid="347"><div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info" data-reactid="348"><div data-reactid="349"><div class="ant-progress-outer" data-reactid="350"><div class="ant-progress-inner" data-reactid="351"><div class="ant-progress-bg" style="width:30%;height:10px;" data-reactid="352"></div></div></div><span class="ant-progress-text" data-reactid="353">30%</span></div></div><div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info" data-reactid="354"><div data-reactid="355"><div class="ant-progress-outer" data-reactid="356"><div class="ant-progress-inner" data-reactid="357"><div class="ant-progress-bg" style="width:50%;height:10px;" data-reactid="358"></div></div></div><span class="ant-progress-text" data-reactid="359">50%</span></div></div><div class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info" data-reactid="360"><div data-reactid="361"><div class="ant-progress-outer" data-reactid="362"><div class="ant-progress-inner" data-reactid="363"><div class="ant-progress-bg" style="width:70%;height:10px;" data-reactid="364"></div></div></div><span class="ant-progress-text" data-reactid="365"><i class="anticon anticon-cross-circle" data-reactid="366"></i></span></div></div><div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info" data-reactid="367"><div data-reactid="368"><div class="ant-progress-outer" data-reactid="369"><div class="ant-progress-inner" data-reactid="370"><div class="ant-progress-bg" style="width:100%;height:10px;" data-reactid="371"></div></div></div><span class="ant-progress-text" data-reactid="372"><i class="anticon anticon-check-circle" data-reactid="373"></i></span></div></div><div class="ant-progress ant-progress-line ant-progress-status-normal" data-reactid="374"><div data-reactid="375"><div class="ant-progress-outer" data-reactid="376"><div class="ant-progress-inner" data-reactid="377"><div class="ant-progress-bg" style="width:50%;height:10px;" data-reactid="378"></div></div></div></div></div></div></section><section class="code-box-meta markdown" data-reactid="379"><div class="code-box-title" data-reactid="380"><a href="#components-progress-demo-line" data-reactid="381">Progress bar</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/line.md" data-reactid="382"><i class="anticon anticon-edit" data-reactid="383"></i></a></div><div data-reactid="384"><p data-reactid="385"><!-- react-text: 386 -->A standard progress bar.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="387"></i></section><section class="highlight-wrapper" data-reactid="388"><div class="highlight" data-reactid="389"><i class="anticon anticon-copy code-box-code-copy" data-reactid="390"></i><pre class="language-jsx" data-reactid="391"><code data-reactid="392"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">30</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">70</span><span class="token punctuation">}</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exception<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token attr-name">showInfo</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-progress-demo-line-mini" data-reactid="393"><section class="code-box-demo" data-reactid="394"><div style="width:170px;" data-reactid="395"><div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info" data-reactid="396"><div data-reactid="397"><div class="ant-progress-outer" data-reactid="398"><div class="ant-progress-inner" data-reactid="399"><div class="ant-progress-bg" style="width:30%;height:5px;" data-reactid="400"></div></div></div><span class="ant-progress-text" data-reactid="401">30%</span></div></div><div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info" data-reactid="402"><div data-reactid="403"><div class="ant-progress-outer" data-reactid="404"><div class="ant-progress-inner" data-reactid="405"><div class="ant-progress-bg" style="width:50%;height:5px;" data-reactid="406"></div></div></div><span class="ant-progress-text" data-reactid="407">50%</span></div></div><div class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info" data-reactid="408"><div data-reactid="409"><div class="ant-progress-outer" data-reactid="410"><div class="ant-progress-inner" data-reactid="411"><div class="ant-progress-bg" style="width:70%;height:5px;" data-reactid="412"></div></div></div><span class="ant-progress-text" data-reactid="413"><i class="anticon anticon-cross-circle" data-reactid="414"></i></span></div></div><div class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info" data-reactid="415"><div data-reactid="416"><div class="ant-progress-outer" data-reactid="417"><div class="ant-progress-inner" data-reactid="418"><div class="ant-progress-bg" style="width:100%;height:5px;" data-reactid="419"></div></div></div><span class="ant-progress-text" data-reactid="420"><i class="anticon anticon-check-circle" data-reactid="421"></i></span></div></div></div></section><section class="code-box-meta markdown" data-reactid="422"><div class="code-box-title" data-reactid="423"><a href="#components-progress-demo-line-mini" data-reactid="424">Mini size progress bar</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/line-mini.md" data-reactid="425"><i class="anticon anticon-edit" data-reactid="426"></i></a></div><div data-reactid="427"><p data-reactid="428"><!-- react-text: 429 -->Appropriate for a narrow area.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="430"></i></section><section class="highlight-wrapper" data-reactid="431"><div class="highlight" data-reactid="432"><i class="anticon anticon-copy code-box-code-copy" data-reactid="433"></i><pre class="language-jsx" data-reactid="434"><code data-reactid="435"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> width<span class="token punctuation">:</span> <span class="token number">170</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">30</span><span class="token punctuation">}</span></span> <span class="token attr-name">strokeWidth</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token attr-name">strokeWidth</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>active<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">70</span><span class="token punctuation">}</span></span> <span class="token attr-name">strokeWidth</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exception<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token attr-name">strokeWidth</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-progress-demo-circle-dynamic" data-reactid="436"><section class="code-box-demo" data-reactid="437"><div data-reactid="438"><div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" data-reactid="439"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="440"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="441"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="442"></path><path 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-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="443"></path></svg><span class="ant-progress-text" data-reactid="444">0%</span></div></div><div class="ant-btn-group" data-reactid="445"><button type="button" class="ant-btn ant-btn-icon-only" data-reactid="446"><i class="anticon anticon-minus" data-reactid="447"></i></button><button type="button" class="ant-btn ant-btn-icon-only" data-reactid="448"><i class="anticon anticon-plus" data-reactid="449"></i></button></div></div></section><section class="code-box-meta markdown" data-reactid="450"><div class="code-box-title" data-reactid="451"><a href="#components-progress-demo-circle-dynamic" data-reactid="452">Dynamic circular progress bar</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/circle-dynamic.md" data-reactid="453"><i class="anticon anticon-edit" data-reactid="454"></i></a></div><div data-reactid="455"><p data-reactid="456"><!-- react-text: 457 -->A dynamic progress bar is better.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="458"></i></section><section class="highlight-wrapper" data-reactid="459"><div class="highlight" data-reactid="460"><i class="anticon anticon-copy code-box-code-copy" data-reactid="461"></i><pre class="language-jsx" data-reactid="462"><code data-reactid="463"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> ButtonGroup <span class="token operator">=</span> Button<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
percent<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
increase <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> percent <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>percent <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>percent <span class="token operator">></span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
percent <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> percent <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
decline <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> percent <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>percent <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>percent <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
percent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> percent <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>percent<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>decline<span class="token punctuation">}</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minus<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increase<span class="token punctuation">}</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-progress-demo-format" data-reactid="464"><section class="code-box-demo" data-reactid="465"><div data-reactid="466"><div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" data-reactid="467"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="468"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="469"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="470"></path><path 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-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="471"></path></svg><span class="ant-progress-text" data-reactid="472">75 Days</span></div></div><div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info" data-reactid="473"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="474"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="475"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="476"></path><path 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-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="477"></path></svg><span class="ant-progress-text" data-reactid="478">Done</span></div></div></div><style data-reactid="479">
div.ant-progress-circle,
div.ant-progress-line {
margin-right: 8px;
margin-bottom: 8px;
}
</style></section><section class="code-box-meta markdown" data-reactid="480"><div class="code-box-title" data-reactid="481"><a href="#components-progress-demo-format" data-reactid="482">Custom text format</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/format.md" data-reactid="483"><i class="anticon anticon-edit" data-reactid="484"></i></a></div><div data-reactid="485"><p data-reactid="486"><!-- react-text: 487 -->You can custom text format by setting <!-- /react-text --><code data-reactid="488"><!-- react-text: 489 -->format<!-- /react-text --></code><!-- react-text: 490 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="491"></i></section><section class="highlight-wrapper" data-reactid="492"><div class="highlight" data-reactid="493"><i class="anticon anticon-copy code-box-code-copy" data-reactid="494"></i><pre class="language-jsx" data-reactid="495"><code data-reactid="496"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">75</span><span class="token punctuation">}</span></span> <span class="token attr-name">format</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>percent <span class="token operator">=</span><span class="token operator">></span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>percent<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Days`</span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token attr-name">format</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token string">'Done'</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div><div style="padding-left:8px;padding-right:8px;" class="ant-col-12 code-boxes-col-2-1" data-reactid="497"><section class="code-box" id="components-progress-demo-circle" data-reactid="498"><section class="code-box-demo" data-reactid="499"><div data-reactid="500"><div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" data-reactid="501"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="502"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="503"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="504"></path><path 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-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="505"></path></svg><span class="ant-progress-text" data-reactid="506">75%</span></div></div><div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info" data-reactid="507"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="508"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="509"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="510"></path><path 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-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="511"></path></svg><span class="ant-progress-text" data-reactid="512"><i class="anticon anticon-cross" data-reactid="513"></i></span></div></div><div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info" data-reactid="514"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="515"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="516"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="517"></path><path 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-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="518"></path></svg><span class="ant-progress-text" data-reactid="519"><i class="anticon anticon-check" data-reactid="520"></i></span></div></div></div><style data-reactid="521">
.ant-progress-circle-wrap,
.ant-progress-line-wrap {
margin-right: 8px;
margin-bottom: 5px;
}
</style></section><section class="code-box-meta markdown" data-reactid="522"><div class="code-box-title" data-reactid="523"><a href="#components-progress-demo-circle" data-reactid="524">Circular progress bar</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/circle.md" data-reactid="525"><i class="anticon anticon-edit" data-reactid="526"></i></a></div><div data-reactid="527"><p data-reactid="528"><!-- react-text: 529 -->A circular progress bar.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="530"></i></section><section class="highlight-wrapper" data-reactid="531"><div class="highlight" data-reactid="532"><i class="anticon anticon-copy code-box-code-copy" data-reactid="533"></i><pre class="language-jsx" data-reactid="534"><code data-reactid="535"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">75</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">70</span><span class="token punctuation">}</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exception<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-progress-demo-circle-mini" data-reactid="536"><section class="code-box-demo" data-reactid="537"><div data-reactid="538"><div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" data-reactid="539"><div class="ant-progress-inner" style="width:80px;height:80px;font-size:18.8px;" data-reactid="540"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="541"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="542"></path><path 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-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="543"></path></svg><span class="ant-progress-text" data-reactid="544">30%</span></div></div><div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info" data-reactid="545"><div class="ant-progress-inner" style="width:80px;height:80px;font-size:18.8px;" data-reactid="546"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="547"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="548"></path><path 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-linecap="round" stroke="#ff5500" stroke-width="6" fill-opacity="0" style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="549"></path></svg><span class="ant-progress-text" data-reactid="550"><i class="anticon anticon-cross" data-reactid="551"></i></span></div></div><div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info" data-reactid="552"><div class="ant-progress-inner" style="width:80px;height:80px;font-size:18.8px;" data-reactid="553"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="554"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="555"></path><path 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-linecap="round" stroke="#87d068" stroke-width="6" fill-opacity="0" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="556"></path></svg><span class="ant-progress-text" data-reactid="557"><i class="anticon anticon-check" data-reactid="558"></i></span></div></div></div></section><section class="code-box-meta markdown" data-reactid="559"><div class="code-box-title" data-reactid="560"><a href="#components-progress-demo-circle-mini" data-reactid="561">Mini size circular progress bar</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/circle-mini.md" data-reactid="562"><i class="anticon anticon-edit" data-reactid="563"></i></a></div><div data-reactid="564"><p data-reactid="565"><!-- react-text: 566 -->A smaller circular progress bar.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="567"></i></section><section class="highlight-wrapper" data-reactid="568"><div class="highlight" data-reactid="569"><i class="anticon anticon-copy code-box-code-copy" data-reactid="570"></i><pre class="language-jsx" data-reactid="571"><code data-reactid="572"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">30</span><span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">80</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">70</span><span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">80</span><span class="token punctuation">}</span></span> <span class="token attr-name">status</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>exception<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">80</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-progress-demo-dynamic" data-reactid="573"><section class="code-box-demo" data-reactid="574"><div data-reactid="575"><div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info" data-reactid="576"><div data-reactid="577"><div class="ant-progress-outer" data-reactid="578"><div class="ant-progress-inner" data-reactid="579"><div class="ant-progress-bg" style="width:0%;height:10px;" data-reactid="580"></div></div></div><span class="ant-progress-text" data-reactid="581">0%</span></div></div><div class="ant-btn-group" data-reactid="582"><button type="button" class="ant-btn ant-btn-icon-only" data-reactid="583"><i class="anticon anticon-minus" data-reactid="584"></i></button><button type="button" class="ant-btn ant-btn-icon-only" data-reactid="585"><i class="anticon anticon-plus" data-reactid="586"></i></button></div></div></section><section class="code-box-meta markdown" data-reactid="587"><div class="code-box-title" data-reactid="588"><a href="#components-progress-demo-dynamic" data-reactid="589">Dynamic</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/dynamic.md" data-reactid="590"><i class="anticon anticon-edit" data-reactid="591"></i></a></div><div data-reactid="592"><p data-reactid="593"><!-- react-text: 594 -->A dynamic progress bar is better.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="595"></i></section><section class="highlight-wrapper" data-reactid="596"><div class="highlight" data-reactid="597"><i class="anticon anticon-copy code-box-code-copy" data-reactid="598"></i><pre class="language-jsx" data-reactid="599"><code data-reactid="600"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> ButtonGroup <span class="token operator">=</span> Button<span class="token punctuation">.</span>Group<span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
state <span class="token operator">=</span> <span class="token punctuation">{</span>
percent<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
increase <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> percent <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>percent <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>percent <span class="token operator">></span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
percent <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> percent <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
decline <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> percent <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>percent <span class="token operator">-</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>percent <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
percent <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> percent <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>percent<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>decline<span class="token punctuation">}</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minus<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>increase<span class="token punctuation">}</span></span> <span class="token attr-name">icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>plus<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ButtonGroup</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>App</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section><section class="code-box" id="components-progress-demo-dashboard" data-reactid="601"><section class="code-box-demo" data-reactid="602"><div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info" data-reactid="603"><div class="ant-progress-inner" style="width:132px;height:132px;font-size:27.12px;" data-reactid="604"><svg class="ant-progress-circle " viewBox="0 0 100 100" data-reactid="605"><path class="ant-progress-circle-trail" 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-width="6" fill-opacity="0" style="stroke-dasharray:220.30970943744057px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="606"></path><path 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-linecap="round" stroke="#108ee9" stroke-width="6" fill-opacity="0" style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;" data-reactid="607"></path></svg><span class="ant-progress-text" data-reactid="608">75%</span></div></div></section><section class="code-box-meta markdown" data-reactid="609"><div class="code-box-title" data-reactid="610"><a href="#components-progress-demo-dashboard" data-reactid="611">Dashboard</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/components/progress/demo/dashboard.md" data-reactid="612"><i class="anticon anticon-edit" data-reactid="613"></i></a></div><div data-reactid="614"><p data-reactid="615"><!-- react-text: 616 -->A dashboard style of progress.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="617"></i></section><section class="highlight-wrapper" data-reactid="618"><div class="highlight" data-reactid="619"><i class="anticon anticon-copy code-box-code-copy" data-reactid="620"></i><pre class="language-jsx" data-reactid="621"><code data-reactid="622"><span class="token keyword">import</span> <span class="token punctuation">{</span> Progress <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Progress</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dashboard<span class="token punctuation">"</span></span> <span class="token attr-name">percent</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">75</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="623"><h2 id="API" data-reactid="624"><span data-reactid="625"><!-- react-text: 626 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="627">#</a></h2><table data-reactid="628"><thead data-reactid="629"><tr data-reactid="630"><th data-reactid="631"><!-- react-text: 632 -->Property<!-- /react-text --></th><th data-reactid="633"><!-- react-text: 634 -->Description<!-- /react-text --></th><th data-reactid="635"><!-- react-text: 636 -->Type<!-- /react-text --></th><th data-reactid="637"><!-- react-text: 638 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="639"><tr data-reactid="640"><td data-reactid="641"><!-- react-text: 642 -->type<!-- /react-text --></td><td data-reactid="643"><!-- react-text: 644 -->to set the type, options: <!-- /react-text --><code data-reactid="645"><!-- react-text: 646 -->line<!-- /react-text --></code><!-- react-text: 647 --> <!-- /react-text --><code data-reactid="648"><!-- react-text: 649 -->circle<!-- /react-text --></code><!-- react-text: 650 --> <!-- /react-text --><code data-reactid="651"><!-- react-text: 652 -->dashboard<!-- /react-text --></code></td><td data-reactid="653"><!-- react-text: 654 -->string<!-- /react-text --></td><td data-reactid="655"><!-- react-text: 656 -->line<!-- /react-text --></td></tr><tr data-reactid="657"><td data-reactid="658"><!-- react-text: 659 -->percent<!-- /react-text --></td><td data-reactid="660"><!-- react-text: 661 -->to set the completion percentage<!-- /react-text --></td><td data-reactid="662"><!-- react-text: 663 -->number<!-- /react-text --></td><td data-reactid="664"><!-- react-text: 665 -->0<!-- /react-text --></td></tr><tr data-reactid="666"><td data-reactid="667"><!-- react-text: 668 -->format<!-- /react-text --></td><td data-reactid="669"><!-- react-text: 670 -->template function of the content<!-- /react-text --></td><td data-reactid="671"><!-- react-text: 672 -->function(percent)<!-- /react-text --></td><td data-reactid="673"><code data-reactid="674"><!-- react-text: 675 -->percent =&gt; percent + &#x27;%&#x27;<!-- /react-text --></code></td></tr><tr data-reactid="676"><td data-reactid="677"><!-- react-text: 678 -->status<!-- /react-text --></td><td data-reactid="679"><!-- react-text: 680 -->to set the status of the progress, options: <!-- /react-text --><code data-reactid="681"><!-- react-text: 682 -->success<!-- /react-text --></code><!-- react-text: 683 --> <!-- /react-text --><code data-reactid="684"><!-- react-text: 685 -->exception<!-- /react-text --></code><!-- react-text: 686 --> <!-- /react-text --><code data-reactid="687"><!-- react-text: 688 -->active<!-- /react-text --></code></td><td data-reactid="689"><!-- react-text: 690 -->string<!-- /react-text --></td><td data-reactid="691"><!-- react-text: 692 -->-<!-- /react-text --></td></tr><tr data-reactid="693"><td data-reactid="694"><!-- react-text: 695 -->showInfo<!-- /react-text --></td><td data-reactid="696"><!-- react-text: 697 -->determine whether to display the progress value and the status icon<!-- /react-text --></td><td data-reactid="698"><!-- react-text: 699 -->boolean<!-- /react-text --></td><td data-reactid="700"><!-- react-text: 701 -->true<!-- /react-text --></td></tr><tr data-reactid="702"><td data-reactid="703"><!-- react-text: 704 -->strokeWidth <!-- /react-text --><code data-reactid="705"><!-- react-text: 706 -->(type=line)<!-- /react-text --></code></td><td data-reactid="707"><!-- react-text: 708 -->to set the width of the progress bar, unit: <!-- /react-text --><code data-reactid="709"><!-- react-text: 710 -->px<!-- /react-text --></code></td><td data-reactid="711"><!-- react-text: 712 -->number<!-- /react-text --></td><td data-reactid="713"><!-- react-text: 714 -->10<!-- /react-text --></td></tr><tr data-reactid="715"><td data-reactid="716"><!-- react-text: 717 -->strokeWidth <!-- /react-text --><code data-reactid="718"><!-- react-text: 719 -->(type=circle)<!-- /react-text --></code></td><td data-reactid="720"><!-- react-text: 721 -->to set the width of the circular progress bar, unit: percentage of the canvas width<!-- /react-text --></td><td data-reactid="722"><!-- react-text: 723 -->number<!-- /react-text --></td><td data-reactid="724"><!-- react-text: 725 -->6<!-- /react-text --></td></tr><tr data-reactid="726"><td data-reactid="727"><!-- react-text: 728 -->width <!-- /react-text --><code data-reactid="729"><!-- react-text: 730 -->(type=circle)<!-- /react-text --></code></td><td data-reactid="731"><!-- react-text: 732 -->to set the canvas width of the circular progress bar, unit: <!-- /react-text --><code data-reactid="733"><!-- react-text: 734 -->px<!-- /react-text --></code></td><td data-reactid="735"><!-- react-text: 736 -->number<!-- /react-text --></td><td data-reactid="737"><!-- react-text: 738 -->132<!-- /react-text --></td></tr></tbody></table></section></article></div></div><div class="ant-row" data-reactid="739"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="740"><section class="prev-next-nav" data-reactid="741"><a class="prev-page" href="/components/notification/" data-reactid="742"><span data-reactid="743">Notification</span><span class="chinese" data-reactid="744"></span></a><a class="next-page" href="/components/popconfirm/" data-reactid="745"><span data-reactid="746">Popconfirm</span><span class="chinese" data-reactid="747"></span></a></section></div></div></div><footer id="footer" data-reactid="748"><ul data-reactid="749"><li data-reactid="750"><h2 data-reactid="751"><i class="anticon anticon-github" data-reactid="752"></i><!-- react-text: 753 --> GitHub<!-- /react-text --></h2><div data-reactid="754"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="755"><span data-reactid="756">Repository</span></a></div><div data-reactid="757"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="758"><span data-reactid="759">Customize Theme</span></a></div><div data-reactid="760"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="761"><span data-reactid="762">Awesome Ant Design</span></a></div></li><li data-reactid="763"><h2 data-reactid="764"><i class="anticon anticon-link" data-reactid="765"></i><!-- react-text: 766 --> <!-- /react-text --><span data-reactid="767">Links</span></h2><div data-reactid="768"><a href="https://design.alipay.com/" data-reactid="769"><span data-reactid="770">Ant Financial Design Platform</span></a></div><div data-reactid="771"><a href="http://mobile.ant.design" data-reactid="772">Ant Design Mobile</a><span data-reactid="773"> - </span><span data-reactid="774">Mobile UI</span></div><div data-reactid="775"><a href="http://scaffold.ant.design" data-reactid="776">Scaffolds</a><span data-reactid="777"> - </span><span data-reactid="778">Scaffold Market</span></div><div data-reactid="779"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="780">dva</a><!-- react-text: 781 --> - <!-- /react-text --><span data-reactid="782">Framework</span></div><div data-reactid="783"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="784">dva-cli</a><!-- react-text: 785 --> -<!-- /react-text --><span data-reactid="786">Developer Tools</span></div><div data-reactid="787"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="788">Egg</a><span data-reactid="789"> - </span><span data-reactid="790">Enterprise Node Framework</span></div><div data-reactid="791"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="792">AntV</a><span data-reactid="793"> - </span><span data-reactid="794">Data Visualization</span></div><div data-reactid="795"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="796">Ant Motion</a><span data-reactid="797"> - </span><span data-reactid="798">Motion Solution</span></div><div data-reactid="799"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="800">AntD Library</a><span data-reactid="801"> - </span><span data-reactid="802">Axure library</span></div><div data-reactid="803"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="804">Ant UX</a><span data-reactid="805"> - </span><span data-reactid="806">Sitemap Template</span></div></li><li data-reactid="807"><h2 data-reactid="808"><i class="anticon anticon-customer-service" data-reactid="809"></i><!-- react-text: 810 --> <!-- /react-text --><span data-reactid="811">Community</span></h2><div data-reactid="812"><a href="/changelog" data-reactid="813"><span data-reactid="814">Change Log</span></a></div><div data-reactid="815"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="816"><span data-reactid="817">FAQ</span></a></div><div data-reactid="818"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="819"><span data-reactid="820">Chat Room (中文)</span></a></div><div data-reactid="821"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="822"><span data-reactid="823">Chat Room (English)</span></a></div><div data-reactid="824"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="825"><span data-reactid="826">Bug Report</span></a></div><div data-reactid="827"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="828"><span data-reactid="829">Issues</span></a></div><div data-reactid="830"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="831"><span data-reactid="832">StackOverflow</span></a></div><div data-reactid="833"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="834"><span data-reactid="835">SegmentFault</span></a></div></li><li data-reactid="836"><h2 data-reactid="837"><!-- react-text: 838 -->Copyright © <!-- /react-text --><!-- react-text: 839 -->2017<!-- /react-text --></h2><div data-reactid="840"><span data-reactid="841">Created by AFUX</span></div><div data-reactid="842"><!-- react-text: 843 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="844">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink