{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/feedback/progress","result":{"data":{"current":{"frontmatter":{"title":"Progress 进度条","order":91,"brief":"用于展示用户操作的当前进度和状态，一般在操作耗时较长时使用。也可用来表示任务/对象的完成度","icon":"doc-progress"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#标准的进度条","title":"标准的进度条"},{"url":"#展示百分比文本","title":"展示百分比文本"},{"url":"#垂直的进度条","title":"垂直的进度条"},{"url":"#环形进度条","title":"环形进度条"},{"url":"#小号的环形进度条","title":"小号的环形进度条"},{"url":"#动态改变进度","title":"动态改变进度"},{"url":"#自定义中心文字内容","title":"自定义中心文字内容"},{"url":"#圆角方角边缘","title":"圆角/方角边缘"},{"url":"#自定义进度条颜色","title":"自定义进度条颜色"},{"url":"#自动补齐颜色区间","title":"自动补齐颜色区间"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 91,\n  \"category\": \"反馈类\",\n  \"title\": \"Progress 进度条\",\n  \"icon\": \"doc-progress\",\n  \"width\": \"60%\",\n  \"brief\": \"用于展示用户操作的当前进度和状态，一般在操作耗时较长时使用。也可用来表示任务/对象的完成度\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Progress } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6807\\u51C6\\u7684\\u8FDB\\u5EA6\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"stroke\"), \"\\u5C5E\\u6027\\u6765\\u63A7\\u5236\\u8FDB\\u5EA6\\u6761\\u7684\\u586B\\u5145\\u8272\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"percent\"), \"\\u5C5E\\u6027\\u63A7\\u5236\\u5DF2\\u5B8C\\u6210\\u7684\\u8FDB\\u5EA6\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \"\\u5C5E\\u6027\\u63A7\\u5236\\u8FDB\\u5EA6\\u6761\\u5C3A\\u5BF8\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"aria-label\"), \"\\u8BF4\\u660E\\u8FDB\\u5EA6\\u6761\\u5177\\u4F53\\u4EE3\\u8868\\u542B\\u4E49\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u679C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \"\\u9884\\u8BBE\\u7684\\u5C3A\\u5BF8\\u4E0D\\u6EE1\\u8DB3\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \"\\u4F20\\u5165 height \\u81EA\\u5B9A\\u4E49\\u8FDB\\u5EA6\\u6761\\u9AD8\\u5EA6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ width: 200 }}>\\n        <Progress percent={10} stroke=\\\"var(--semi-color-warning)\\\" aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={25} stroke=\\\"var(--semi-color-danger)\\\" aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={50} aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={80} aria-label=\\\"download progress\\\" />\\n        <br />\\n        <Progress percent={80} size=\\\"large\\\" aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={80} style={{ height: '8px' }} aria-label=\\\"disk usage\\\" />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C55\\u793A\\u767E\\u5206\\u6BD4\\u6587\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showInfo\"), \"\\u63A7\\u5236\\u662F\\u5426\\u5C55\\u793A\\u767E\\u5206\\u6BD4\\u6570\\u5B57\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"format\"), \"\\u683C\\u5F0F\\u5316\\u5C55\\u793A\\u6587\\u672C\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ width: 200 }}>\\n        <Progress percent={10} stroke=\\\"var(--semi-color-warning)\\\" showInfo={true} aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={25} stroke=\\\"var(--semi-color-danger)\\\" showInfo={true} aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={50} showInfo={true} aria-label=\\\"disk usage\\\" />\\n        <br />\\n        <Progress percent={50} showInfo={true} format={percent => percent * 10 + '\\u2030'} aria-label=\\\"disk usage\\\" />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5782\\u76F4\\u7684\\u8FDB\\u5EA6\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"direction='vertical'\"), \"\\uFF0C\\u5C55\\u793A\\u5782\\u76F4\\u8FDB\\u5EA6\\u6761\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \"\\u4F20\\u5165 width \\u63A7\\u5236\\u8FDB\\u5EA6\\u6761\\u5BBD\\u5EA6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div style={{ height: 100, display: 'flex' }}>\\n        <Progress percent={10} direction=\\\"vertical\\\" aria-label=\\\"disk usage\\\" />\\n        <Progress percent={25} direction=\\\"vertical\\\" aria-label=\\\"disk usage\\\" />\\n        <Progress percent={50} direction=\\\"vertical\\\" aria-label=\\\"disk usage\\\" />\\n        <Progress percent={80} direction=\\\"vertical\\\" size=\\\"large\\\" aria-label=\\\"disk usage\\\" />\\n        <Progress percent={80} direction=\\\"vertical\\\" style={{ width: '8px' }} aria-label=\\\"disk usage\\\" />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u73AF\\u5F62\\u8FDB\\u5EA6\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C06 type \\u8BBE\\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"circle\"), \"\\uFF0C\\u8FDB\\u5EA6\\u6761\\u5C06\\u4F1A\\u5C55\\u793A\\u6210\\u73AF\\u72B6\\u3002\\u8FDB\\u5EA6\\u6761\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\u4E3A 72 x 72\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Progress percent={10} type=\\\"circle\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={25} type=\\\"circle\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={50} type=\\\"circle\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={80} type=\\\"circle\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n    </div>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4FEE\\u6539\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width\"), \"\\u6765\\u63A7\\u5236\\u73AF\\u5F62\\u8FDB\\u5EA6\\u6761\\u7684\\u5927\\u5C0F\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <React.Fragment>\\n        <div>\\n            <Progress percent={100} type=\\\"circle\\\" width={100} style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        </div>\\n        <div>\\n            <Progress\\n                percent={100}\\n                type=\\\"circle\\\"\\n                width={100}\\n                style={{ margin: 5 }}\\n                stroke=\\\"var(--semi-color-danger)\\\"\\n                aria-label=\\\"disk usage\\\"\\n            />\\n        </div>\\n    </React.Fragment>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C0F\\u53F7\\u7684\\u73AF\\u5F62\\u8FDB\\u5EA6\\u6761\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5C0F\\u53F7\\u8FDB\\u5EA6\\u6761\\u9ED8\\u8BA4\\u5C3A\\u5BF8\\u4E3A 24 x 24\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <React.Fragment>\\n        <Progress percent={10} type=\\\"circle\\\" size=\\\"small\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={25} type=\\\"circle\\\" size=\\\"small\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={50} type=\\\"circle\\\" size=\\\"small\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={80} type=\\\"circle\\\" size=\\\"small\\\" style={{ margin: 5 }} aria-label=\\\"disk usage\\\" />\\n    </React.Fragment>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A8\\u6001\\u6539\\u53D8\\u8FDB\\u5EA6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Progress, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [percent, setPercent] = useState(40);\\n    return (\\n        <>\\n            <div>\\n                <Progress percent={percent} showInfo aria-label=\\\"disk usage\\\" />\\n                <Button\\n                    icon={<IconChevronLeft />}\\n                    theme=\\\"light\\\"\\n                    onClick={() => {\\n                        setPercent(percent - 10);\\n                    }}\\n                    disabled={percent === 0}\\n                />\\n                <Button\\n                    icon={<IconChevronRight />}\\n                    theme=\\\"light\\\"\\n                    onClick={() => {\\n                        setPercent(percent + 10);\\n                    }}\\n                    disabled={percent >= 100}\\n                />\\n            </div>\\n        </>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Progress, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [cirPerc, setCirPerc] = useState(40);\\n    return (\\n        <div>\\n            <div>\\n                <Progress percent={cirPerc} type=\\\"circle\\\" aria-label=\\\"disk usage\\\" />\\n            </div>\\n            <Button\\n                icon={<IconChevronLeft />}\\n                theme=\\\"light\\\"\\n                onClick={() => {\\n                    setCirPerc(cirPerc - 10);\\n                }}\\n                disabled={cirPerc === 0}\\n            />\\n            <Button\\n                icon={<IconChevronRight />}\\n                theme=\\\"light\\\"\\n                onClick={() => {\\n                    setCirPerc(cirPerc + 10);\\n                }}\\n                disabled={cirPerc >= 100}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u4E2D\\u5FC3\\u6587\\u5B57\\u5185\\u5BB9\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"format\"), \" \\u51FD\\u6570\\u81EA\\u5B9A\\u4E49\\u4E2D\\u5FC3\\u6587\\u5B57\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"format\"), \" \\u7684\\u5165\\u53C2\\u4E3A\\u5F53\\u524D\\u767E\\u5206\\u6BD4\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5982\\u679C\\u4E0D\\u9700\\u8981\\u4E2D\\u5FC3\\u6587\\u672C\\u5185\\u5BB9\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showInfo\"), \" \\u8BBE\\u4E3A false\\uFF0C\\u6216\\u8005\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"format\"), \" \\u4E2D\\u76F4\\u63A5\\u8FD4\\u56DE\\u7A7A\\u5B57\\u7B26\\u4E32\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <React.Fragment>\\n        <Progress\\n            percent={75}\\n            showInfo\\n            type=\\\"circle\\\"\\n            format={per => per + 'Days'}\\n            style={{ margin: 10 }}\\n            aria-label=\\\"disk usage\\\"\\n        />\\n        <Progress\\n            percent={100}\\n            showInfo\\n            type=\\\"circle\\\"\\n            format={per => 'Done'}\\n            style={{ margin: 10 }}\\n            aria-label=\\\"disk usage\\\"\\n        />\\n        <Progress percent={50} type=\\\"circle\\\" showInfo={false} style={{ margin: 10 }} aria-label=\\\"disk usage\\\" />\\n    </React.Fragment>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5706\\u89D2/\\u65B9\\u89D2\\u8FB9\\u7F18\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 strokeLinecap \\u5C5E\\u6027\\uFF0C\\u4F60\\u53EF\\u4EE5\\u63A7\\u5236\\u73AF\\u5F62\\u8FDB\\u5EA6\\u6761\\u8FB9\\u7F18\\u5F62\\u72B6\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Progress } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <React.Fragment>\\n        <Progress percent={50} strokeLinecap=\\\"round\\\" type=\\\"circle\\\" style={{ margin: 10 }} aria-label=\\\"disk usage\\\" />\\n        <Progress percent={50} strokeLinecap=\\\"square\\\" type=\\\"circle\\\" style={{ margin: 10 }} aria-label=\\\"disk usage\\\" />\\n    </React.Fragment>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u8FDB\\u5EA6\\u6761\\u989C\\u8272\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"stroke\"), \" \\u5C5E\\u6027\\uFF0C\\u81EA\\u5B9A\\u4E49\\u5177\\u4F53 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"percent\"), \" \\u7684\\u989C\\u8272\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useState } from 'react';\\nimport { Progress, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [percent, setPercent] = useState(10);\\n    const strokeArr = [\\n        { percent: 20, color: 'red' },\\n        { percent: 40, color: 'orange-9' },\\n        { percent: 60, color: 'light-green-8' },\\n        { percent: 80, color: 'hsla(125, 50%, 46% / 1)' }\\n    ];\\n    return (\\n        <>\\n            <div>\\n                <Progress\\n                    percent={percent}\\n                    stroke={strokeArr}\\n                    showInfo\\n                    type=\\\"circle\\\"\\n                    width={100}\\n                    aria-label=\\\"disk usage\\\"\\n                />\\n                <Progress\\n                    percent={percent}\\n                    stroke={strokeArr}\\n                    showInfo\\n                    style={{ margin: '20px 0 10px' }}\\n                    aria-label=\\\"disk usage\\\"\\n                />\\n            </div>\\n            <Button\\n                icon={<IconChevronLeft />}\\n                theme=\\\"light\\\"\\n                onClick={() => {\\n                    setPercent(percent - 10);\\n                }}\\n                disabled={percent === 0}\\n            />\\n            <Button\\n                icon={<IconChevronRight />}\\n                theme=\\\"light\\\"\\n                onClick={() => {\\n                    setPercent(percent + 10);\\n                }}\\n                disabled={percent === 100}\\n            />\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u52A8\\u8865\\u9F50\\u989C\\u8272\\u533A\\u95F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"strokeGradient\"), \" \\u5C5E\\u6027\\uFF0C\\u5C5E\\u6027\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \" \\u65F6\\u81EA\\u52A8\\u8865\\u9F50\\u989C\\u8272\\u533A\\u95F4\\uFF0C\\u751F\\u6210\\u6E10\\u53D8\\u8272\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useEffect, useState } from 'react';\\nimport { Space, Progress, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [percent, setPercent] = useState(65);\\n    const [percentInterval, setPercentInterval] = useState(0);\\n    useEffect(() => {\\n        setTimeout(\\n            () => {\\n                setPercentInterval(percentInterval > 100 ? 0 : percentInterval + 3);\\n            },\\n            percentInterval === 0 || percentInterval > 100 ? 1200 : 290 - (percentInterval % 50) * 3\\n        );\\n    }, [percentInterval]);\\n    const strokeArr = [\\n        { percent: 0, color: 'rgb(249, 57, 32)' },\\n        { percent: 50, color: '#46259E' },\\n        { percent: 100, color: 'hsla(125, 50%, 46% / 1)' },\\n    ];\\n    const strokeArrReverse = [\\n        { percent: 0, color: 'hsla(125, 50%, 46% / 1)' },\\n        { percent: 50, color: '#46259E' },\\n        { percent: 100, color: 'rgb(249, 57, 32)' },\\n    ];\\n    return (\\n        <>\\n            <Space spacing={20}>\\n                <div>\\n                    <Progress\\n                        percent={percentInterval}\\n                        stroke={strokeArr}\\n                        strokeGradient={true}\\n                        showInfo\\n                        type=\\\"circle\\\"\\n                        width={100}\\n                        aria-label=\\\"file download speed\\\"\\n                    />\\n                </div>\\n                <div>\\n                    <Progress\\n                        percent={percentInterval}\\n                        stroke={strokeArrReverse}\\n                        strokeGradient={true}\\n                        showInfo\\n                        type=\\\"circle\\\"\\n                        width={100}\\n                        aria-label=\\\"file download speed\\\"\\n                    />\\n                </div>\\n            </Space>\\n            <div style={{ width: '100%', margin: '20px 0 10px' }}>\\n                <Progress\\n                    percent={percent}\\n                    stroke={strokeArr}\\n                    strokeGradient={true}\\n                    showInfo\\n                    size=\\\"large\\\"\\n                    aria-label=\\\"file download speed\\\"\\n                />\\n            </div>\\n            <Button\\n                icon={<IconChevronLeft />}\\n                theme=\\\"light\\\"\\n                onClick={() => {\\n                    setPercent(percent - 5);\\n                }}\\n                disabled={percent === 0}\\n            />\\n            <Button\\n                icon={<IconChevronRight />}\\n                theme=\\\"light\\\"\\n                onClick={() => {\\n                    setPercent(percent + 5);\\n                }}\\n                disabled={percent === 100}\\n            />\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-label\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute\"\n  }, \"aria-label\"), \"\\u5C5E\\u6027\\uFF0C\\u7528\\u6765\\u7ED9\\u5F53\\u524D\\u5143\\u7D20\\u52A0\\u4E0A\\u7684\\u6807\\u7B7E\\u63CF\\u8FF0, \\u7528\\u4E8E\\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027\", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.2.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-labelledby\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute\"\n  }, \"aria-labelledby\"), \"\\u5C5E\\u6027\\uFF0C\\u8868\\u660E\\u67D0\\u4E9B\\u5143\\u7D20\\u7684 id \\u662F\\u5F53\\u524D\\u5143\\u7D20\\u7684\\u6807\\u7B7E\\u3002\\u5B83\\u88AB\\u7528\\u6765\\u786E\\u5B9A\\u63A7\\u4EF6\\u6216\\u63A7\\u4EF6\\u7EC4\\u4E0E\\u5B83\\u4EEC\\u6807\\u7B7E\\u4E4B\\u95F4\\u7684\\u8054\\u7CFB, \\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027\", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.2.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"aria-valuetext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute\"\n  }, \"aria-valuetext\"), \"\\u5C5E\\u6027\\uFF0C\\u7528\\u4E8E\\u63D0\\u5347\\u53EF\\u8BBF\\u95EE\\u6027\", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.2.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"direction\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6761\\u72B6\\u8FDB\\u5EA6\\u6761\\u65B9\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'horizontal'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"format\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u683C\\u5F0F\\u5316\\u51FD\\u6570\\uFF0C\\u5165\\u53C2\\u4E3A\\u5F53\\u524D\\u767E\\u5206\\u6BD4\\uFF0Creturn \\u7684\\u7ED3\\u679C\\u5C06\\u4F1A\\u76F4\\u63A5\\u6E32\\u67D3\\u5728\\u5706\\u5F62\\u8FDB\\u5EA6\\u6761\\u4E2D\\u5FC3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(percent: number) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(percent) => percent + '%'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"id\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"id \\u6807\\u8BC6\", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v2.2.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"orbitStroke\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FDB\\u5EA6\\u6761\\u8F68\\u9053\\u586B\\u5145\\u8272\", mdx(\"br\", null), mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"v1.0.0 \\u540E\\u63D0\\u4F9B\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'var(--semi-color-fill-0)'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"percent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FDB\\u5EA6\\u767E\\u5206\\u6BD4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showInfo\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u73AF\\u5F62\\u8FDB\\u5EA6\\u6761\\u662F\\u5426\\u663E\\u793A\\u4E2D\\u95F4\\u6587\\u672C\\uFF0C\\u6761\\u72B6\\u8FDB\\u5EA6\\u6761\\u540E\\u53F3\\u4FA7\\u662F\\u5426\\u663E\\u793A\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C3A\\u5BF8,\\u53EF\\u9009\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"default\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \"(\\u4EC5 type=circle \\u751F\\u6548)\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"large\"), \"(\\u4EC5 type=line \\u751F\\u6548)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"stroke\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8FDB\\u5EA6\\u6761\\u586B\\u5145\\u8272\\uFF0C\\u7C7B\\u578B\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Array<{percent:number; color:string }>\"), \" \\u65F6\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"color\"), \" \\u53C2\\u6570\\u652F\\u6301\\u989C\\u8272\\u7C7B\\u578B\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'Hex'\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'Hsl'\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'Hsla'\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'Rgb'\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'Rgba'\"), \" \", \"|\", \" \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"'Semi Design Tokens'\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" Array<{percent:number; color:string }>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'var(--semi-color-success)'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"strokeGradient\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u751F\\u6210\\u6E10\\u53D8\\u8272\\u8865\\u9F50\\u533A\\u95F4\\u989C\\u8272\\uFF0C\\u9700\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"stroke\"), \" \\u8BBE\\u7F6E\\u81F3\\u5C11\\u4E00\\u4E2A\\u989C\\u8272\\u533A\\u95F4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"strokeLinecap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5706\\u89D2\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"round\"), \"/\\u65B9\\u89D2\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"square\"), \"(\\u4EC5\\u5728 type='circle'\\u6A21\\u5F0F\\u4E0B\\u751F\\u6548)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'round'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"strokeWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type \\u4E3A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\"), \"\\u65F6\\uFF0C\\u8BE5\\u5C5E\\u6027\\u63A7\\u5236\\u8FDB\\u5EA6\\u6761\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"4\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"type\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"line\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"circle\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'line'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u73AF\\u5F62\\u8FDB\\u5EA6\\u6761\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size='default'\\u65F6\\u4E3A 72\\uFF0C'small'\\u4E3A 24\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Progress \\u5177\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"progressbar\"), \" role \\u6765\\u8868\\u793A\\u5B83\\u662F\\u4E00\\u4E2A\\u8FDB\\u5EA6\\u6761\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Progress \\u4F1A\\u81EA\\u52A8\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuenow\"), \" \\u8BBE\\u7F6E\\u4E3A\\u4F20\\u9012\\u7ED9\\u7EC4\\u4EF6\\u7684\\u8FDB\\u5EA6\\u767E\\u5206\\u6BD4\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"percent\"), \"\\uFF09\\uFF0C\\u4EE5\\u786E\\u4FDD\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u53EF\\u4EE5\\u83B7\\u53D6\\u6B63\\u786E\\u7684\\u767E\\u5206\\u6BD4\\u6570\\u503C\\u3002\\u53E6\\u5916\\uFF0CProgress \\u652F\\u6301\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuetext\"), \"\\uFF0C\\u5F53\\u4F60\\u4F20\\u5165\\u65F6\\uFF0C\\u6839\\u636E W3C \\u89C4\\u8303\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuetext\"), \" \\u5C06\\u4F18\\u5148\\u88AB\\u5C4F\\u5E55\\u9605\\u8BFB\\u5668\\u4F7F\\u7528\\u6D88\\u8D39\\uFF0C\\u800C\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-valuenow\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Progress \\u652F\\u6301\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-labelledby\"), mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53 Progress \\u5916\\u90E8\\u5B58\\u5728\\u5173\\u4E8E Progress \\u4F5C\\u7528\\u7684\\u63CF\\u8FF0\\u5143\\u7D20\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u901A\\u8FC7 aria-labelledby \\u663E\\u5F0F\\u6307\\u5B9A\\u67D0\\u4E9B\\u5143\\u7D20\\u7684 id \\u662F Progress \\u7684\\u6807\\u7B7E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5426\\u5219\\u4F60\\u5E94\\u5F53\\u901A\\u8FC7 aria-label \\u8BF4\\u660E Progress \\u6240\\u4EE3\\u8868\\u7684\\u5177\\u4F53\\u6570\\u503C\\u542B\\u4E49\")))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// good case\\n<p id=\\\"progressbar-label\\\">Disk Usage</p>\\n<Progress aria-labelledby=\\\"progressbar-label\\\" percent={80} />\\n\\n// good case\\n<Progress aria-label='Percent of disk usage' percent={80} />\\n<Progress aria-label='Percent of file downloaded' percent={80} />\\n\\n// usage of aria-valuetext\\n<Progress aria-label='Percent of disk usage' percent={80} aria-valuetext=\\\"Step 2: Copying files... \\\"/>\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5982\\u679C\\u8FDB\\u5EA6\\u6761\\u8FC7\\u7A0B\\u590D\\u6742\\uFF0C\\u6216\\u8005\\u6709\\u5F88\\u957F\\u7684\\u7B49\\u5F85\\u65F6\\u95F4\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u5E2E\\u52A9\\u6587\\u672C\\u6765\\u505A\\u8BF4\\u660E\\u3002\\u8FD9\\u6837\\u53EF\\u4EE5\\u8BA9\\u7528\\u6237\\u77E5\\u9053\\u6B63\\u5728\\u53D1\\u751F\\u7684\\u8FDB\\u5EA6\\u8FDB\\u5C55\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/feedback/progress","next":{"fields":{"slug":"en-US/feedback/skeleton"},"id":"d2f16a35-9161-58c4-bf89-f8f898788ae9","frontmatter":{"title":"Skeleton","localeCode":"en-US","icon":"doc-skeleton","showNew":null}},"previous":{"fields":{"slug":"en-US/feedback/progress"},"id":"adeeeb6a-fa5b-53ba-b9ff-0d5a52b0380b","frontmatter":{"title":"Progress","localeCode":"en-US","icon":"doc-progress","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}