Progress
Progress is a component for visually indicating progress.
<Progress value={50} />
Usage
import { Progress } from "@yamada-ui/react"
import { Progress } from "@/components/ui"
import { Progress } from "@workspaces/ui"
<Progress value={50} />
Change Variant
<VStack>
<For each={["outline", "subtle"]}>
{(variant, index) => (
<Progress
key={index}
aria-label="Storage space"
colorScheme="success"
variant={variant}
value={50}
/>
)}
</For>
</VStack>
Change Size
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => (
<Progress key={index} aria-label="Storage space" value={31} size={size} />
)}
</For>
</VStack>
Change Color Scheme
<Progress aria-label="Storage space" colorScheme="purple" value={18} />
Change Shape
<VStack>
<For each={["rounded", "square", "circle"]}>
{(shape, index) => (
<Progress
key={index}
aria-label="Storage space"
shape={shape}
value={50}
/>
)}
</For>
</VStack>
Change Range Color
To change the range color, set rangeColor to a color.
<Progress aria-label="Storage space" rangeColor="green.500" value={18} />
Change Track Color
To change the track color, set trackColor to a color.
<Progress
aria-label="Storage space"
trackColor="green/50"
rangeColor="green"
value={50}
/>
Stripes
To use stripes, set striped to true.
<Progress aria-label="Storage space" striped value={19} />
Animated Stripes
To use animated stripes, set animated to true.
<Progress aria-label="Storage space" striped animated value={20} />
Change Duration
To change the duration, set duration to a number (seconds) or a string.
<Progress
aria-label="Storage space"
striped
animated
duration="3s"
value={50}
/>
Use Animation
To use animation, set value to null.
<Progress value={null} />
Props
Accessibility
Currently, this section is being updated due to the migration of v2.