var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var P=(s,e)=>()=>(e||s((e={exports:{}}).exports,e),e.exports),x=(s,e)=>{for(var n in e)a(s,n,{get:e[n],enumerable:!0})},i=(s,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!m.call(s,o)&&o!==n&&a(s,o,{get:()=>e[o],enumerable:!(t=g(e,o))||t.enumerable});return s};var b=(s,e,n)=>(n=s!=null?h(u(s)):{},i(e||!s||!s.__esModule?a(n,"default",{value:s,enumerable:!0}):n,s)),j=s=>i(a({},"__esModule",{value:!0}),s);var l=P((S,c)=>{c.exports=_jsx_runtime});var k={};x(k,{default:()=>f,frontmatter:()=>v});var r=b(l()),v={id:"progress",category:"feedback",title:"Progress",package:"@chakra-ui/progress",description:"Progress is used to display the progress status for a task that takes a long time or consists of several steps."};function d(s){let e=Object.assign({h2:"h2",pre:"pre",code:"code",h3:"h3",p:"p",ul:"ul",li:"li"},s.components);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-js",children:`import { Progress } from '@chakra-ui/react' `})}),` `,(0,r.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,r.jsx)(e.h3,{id:"progress-with-stripe",children:"Progress with Stripe"}),` `,(0,r.jsxs)(e.p,{children:["You can add ",(0,r.jsx)(e.code,{children:"hasStripe"}),` prop to any progress bar to apply a stripe via a CSS gradient over the progress bar\u2019s background color.`]}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,r.jsx)(e.h3,{id:"progress-sizes",children:"Progress sizes"}),` `,(0,r.jsx)(e.p,{children:"There are two ways you can increase the height of the progress bar:"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:["You can add ",(0,r.jsx)(e.code,{children:"size"})," prop to increase the height of the progress bar."]}),` `,(0,r.jsxs)(e.li,{children:["You can also use the ",(0,r.jsx)(e.code,{children:"height"})," prop to manually set a height."]}),` `]}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,r.jsx)(e.h3,{id:"progress-color-scheme",children:"Progress color scheme"}),` `,(0,r.jsxs)(e.p,{children:["You can add ",(0,r.jsx)(e.code,{children:"colorScheme"}),` prop to any progress bar to apply any color that exists in the `,(0,r.jsx)(e.code,{children:"theme"}),"."]}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,r.jsx)(e.h3,{id:"animated-progress",children:"Animated Progress"}),` `,(0,r.jsxs)(e.p,{children:["To show an animated progress, pass the ",(0,r.jsx)(e.code,{children:"isIndeterminate"})," prop."]}),` `,(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,r.jsx)(e.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,r.jsxs)(e.ul,{children:[` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"Progress"})," has a ",(0,r.jsx)(e.code,{children:"role"})," set to ",(0,r.jsx)(e.code,{children:"progressbar"})," to denote that it is a progress."]}),` `,(0,r.jsxs)(e.li,{children:[(0,r.jsx)(e.code,{children:"Progress"})," has ",(0,r.jsx)(e.code,{children:"aria-valuenow"}),` set to the percentage completion value passed to the component, to ensure the progress percent is visible to screen readers.`]}),` `]})]})}function y(s={}){let{wrapper:e}=s.components||{};return e?(0,r.jsx)(e,Object.assign({},s,{children:(0,r.jsx)(d,s)})):d(s)}var f=y;return j(k);})(); ;return Component;

Progress

Props#

Props#