import {Layout} from '../../src/Layout'; export default Layout;
import docs from 'docs:react-aria-components'; import vanillaDocs from 'docs:vanilla-starter/ProgressBar'; import progressCircleDocs from 'docs:vanilla-starter/ProgressCircle'; import {ProgressBar as VanillaProgressBar} from 'vanilla-starter/ProgressBar'; import {ProgressCircle as VanillaProgressCircle} from 'vanilla-starter/ProgressCircle'; import {ProgressBar as TailwindProgressBar} from 'tailwind-starter/ProgressBar'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/progress/docs/anatomy.svg';
export const tags = ['loading', 'progress'];
{docs.exports.ProgressBar.description}
By default, the value prop is a percentage between 0 and 100. Use the minValue, and maxValue props to set a custom value scale.
<VisualExample component={VanillaProgressBar} docs={docs.exports.ProgressBar} links={docs.links} props={['minValue', 'maxValue']} initialProps={{ label: 'Progress', minValue: 0, maxValue: 150, value: 50 }} />
Use SVG within a <ProgressBar> to build a circular progress indicator or spinner.
<VisualExample component={VanillaProgressCircle} docs={progressCircleDocs.exports.ProgressCircle} links={progressCircleDocs.links} props={['value', 'isIndeterminate']} initialProps={{'aria-label': 'Loading…', value: 60, size: 64}} controlOptions={{value: {control: 'slider'}}} type="vanilla" files={["starters/docs/src/ProgressCircle.tsx"]} />
<ProgressBar>
<Label />
</ProgressBar>