{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/feedback/progress","result":{"data":{"current":{"frontmatter":{"title":"Progress","order":91,"brief":"Used to display the current progress and status of the user operation, and is generally used when the operation takes a long time. Can also be used to indicate the degree of completion of a task/object","icon":"doc-progress"},"fields":{"type":"feedback"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#standard-progress-bar","title":"Standard progress bar"},{"url":"#show-percentage-text","title":"Show percentage text"},{"url":"#vertical-progress-bar","title":"Vertical progress bar"},{"url":"#circular-progress-bar","title":"Circular progress bar"},{"url":"#small-circular-progress-bar","title":"Small circular progress bar"},{"url":"#dynamic-change-percent","title":"Dynamic change percent"},{"url":"#custom-central-text-content","title":"Custom central text content"},{"url":"#round--square-edges","title":"Round / square edges"},{"url":"#customise-the-progress-bar-color","title":"Customise the progress bar color"},{"url":"#auto-completion-of-colour-intervals","title":"Auto-completion of colour intervals"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n \"order\": 91,\n \"category\": \"Feedback\",\n \"title\": \"Progress\",\n \"subTitle\": \"Progress\",\n \"icon\": \"doc-progress\",\n \"width\": \"60%\",\n \"brief\": \"Used to display the current progress and status of the user operation, and is generally used when the operation takes a long time. Can also be used to indicate the degree of completion of a task/object\"\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 }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { Progress } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Standard progress bar\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"stroke\"), \" Property to control the filling color of the progress bar\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Percent\"), \" Property to control completed progress\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"size\"), \" Property control progress bar size\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"aria-label\"), \" Property to explain the specific role\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If the preset size is not satisfied, You can pass height to customize the height of the progress bar through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"style\"), \" property.\"), 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
\\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Show percentage text\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can control whether to show percentage number through the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showInfo\"), \" property In addition, you can format the percentage text show through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \".\"), 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
\\n \\n
\\n \\n
\\n \\n
\\n percent * 10 + '\\u2030'} aria-label=\\\"disk usage\\\"/>\\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Vertical progress bar\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use vertical progress bar by setting \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"direction='vertical'\"), \" If preset width is not satisfied, you can pass width to customize the width of the vertical progress bar through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"style\"), \" property.\"), 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
\\n \\n \\n \\n \\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Circular progress bar\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set type to\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"circle\"), \", the progress bar will be displayed in a ring shape. The default size of the progress bar is 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
\\n \\n \\n \\n \\n
\\n);\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can modify it's \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"width\"), \" to control the size of the circular progress bar.\"), 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 \\n
\\n \\n
\\n
\\n \\n
\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Small circular progress bar\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Small progress bar default size is 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 \\n \\n \\n \\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Dynamic change percent\"), 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, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';\\n\\n() => {\\n const [percent, setPercent] = useState(40);\\n return (\\n <>\\n
\\n \\n }\\n theme=\\\"light\\\"\\n onClick={() => {\\n setPercent(percent - 10);\\n }}\\n disabled={percent === 0}\\n />\\n }\\n theme=\\\"light\\\"\\n onClick={() => {\\n setPercent(percent + 10);\\n }}\\n disabled={percent >= 100}\\n />\\n
\\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 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
\\n
\\n \\n
\\n }\\n theme=\\\"light\\\"\\n onClick={() => {\\n setCirPerc(cirPerc - 10);\\n }}\\n disabled={cirPerc === 0}\\n />\\n }\\n theme=\\\"light\\\"\\n onClick={() => {\\n setCirPerc(cirPerc + 10);\\n }}\\n disabled={cirPerc >= 100}\\n />\\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom central text content\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can customize the central text by passing \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\"), \" function, and the argument of the format is the current percentage\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"If you don't need central text content, you can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showInfo\"), \" to false or return an empty string directly in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"format\")), 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 \\n per + 'Days'} style={{ margin: 10 }} aria-label=\\\"disk usage\\\"/>\\n 'Done'} style={{ margin: 10 }} aria-label=\\\"disk usage\\\"/>\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Round / square edges\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"With the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"strokeLinecap\"), \" property, you can control the edge shape of the ring progress bar.\"), 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 \\n \\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Customise the progress bar color\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The color of a specific \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"percent\"), \" can be customised by setting the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"stroke\"), \" property\"), 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
\\n \\n \\n
\\n }\\n theme=\\\"light\\\"\\n onClick={() => {\\n setPercent(percent - 10);\\n }}\\n disabled={percent === 0}\\n />\\n }\\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 }, \"Auto-completion of colour intervals\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The gradient can be generated by setting the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"strokeGradient\"), \" property to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\"), \", automatically fill the colour interval.\"), 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 \\n
\\n \\n
\\n
\\n \\n
\\n \\n
\\n \\n
\\n }\\n theme=\\\"light\\\"\\n onClick={() => {\\n setPercent(percent - 5);\\n }}\\n disabled={percent === 0}\\n />\\n }\\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 Reference\"), 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 }, \"PROPERTIES\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), 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\"), \" attribute. Used to add a label description to the current element to improve a11y\", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.2.0\")), 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\"), \" attribute. Indicates that the id of some element is the label of the current element. It is used to determine the connection between controls or control groups and their labels, to improve a11y\", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.2.0\")), 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-labelledby_attribute\"\n }, \"aria-labelledby\"), \" attribute. Used to improve a11y\", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.2.0\")), 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 }, \"style class name\"), 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 }, \"The direction of the bar progress bar \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"horizontal\"), \", \", 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 }, \"id\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"id attribute \", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.2.0\")), 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 }, \"format\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Formatting function, the input parameter is the current percentage, the result of return will be directly rendered in the center of the circular progress bar\"), 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 }, \"orbitStroke\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Progress bar track fill color\", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v1.0.0\")), 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 }, \"percentage of progress\"), 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 }, \"Whether to display the middle text in the circular progress bar, and whether to display the text on the right side of the bar-shaped progress bar\"), 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 }, \"size, optional \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \" (only type=circle is effective), \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\"), \" (only type=line is effective)\"), 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 }, \"Fill color of progress bar, When of type \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"Array<{percent:number; color:string }>\"), \", the \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"color\"), \" parameter supports the color types: \", 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 }, \"Whether to automatically generate gradient colors to fill color intervals, requires \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"stroke\"), \" to set at least one color interval\"), 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 }, \"round corner \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"round\"), \"/square corner \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"square\"), \" (only effective in type='circle' mode)\"), 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 }, \"when type is \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"circle\"), \", this property controls the width of the progress bar\"), 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 }, \"style\"), 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 }, \"type, optional \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"line\"), \", \", 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 }, \"Width of circular progress bar\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"72 when size='default', 24 for 'small'\"))))), 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 has a \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"progressbar\"), \" role to indicate that it is a progress bar component.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Progress will automatically set \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-valuenow\"), \" as the progress percentage (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"percent\"), \") passed to the component to ensure that the screen reader can get the correct percentage value. In addition, Progress supports incoming \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-valuetext\"), \". When you pass in, according to W3C specifications, \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-valuetext\"), \" will be used and consumed by screen readers instead of \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-valuenow\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Progress support \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-labelledby\"), mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When there is a description element about the role of Progress outside of Progress, you can explicitly specify that the id of certain elements is the label of Progress through \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-labelledby\")), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Otherwise, you should use aria-label to explain the specific meaning of the value represented by Progress\")))), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// good case\\n

Disk Usage

\\n\\n\\n// good case\\n\\n\\n\\n// usage of aria-valuetext\\n \\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"If the progress bar process is complicated, or there is a long waiting time, you can use the help text to explain. This lets the user know what progress is happening.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/feedback/progress","next":{"fields":{"slug":"zh-CN/feedback/progress"},"id":"2db31e0c-0c77-585c-908d-1b9e3a32d82b","frontmatter":{"title":"Progress 进度条","localeCode":"zh-CN","icon":"doc-progress","showNew":null}},"previous":{"fields":{"slug":"zh-CN/feedback/popconfirm"},"id":"60ab0b92-ee19-51b0-b6af-7b56c84512f7","frontmatter":{"title":"Popconfirm 气泡确认框","localeCode":"zh-CN","icon":"doc-popconfirm","showNew":null}}}},"staticQueryHashes":["1348983216155057","1477422646155057","3245198693155057","417590761155057","63159454155057"]}