Progress

<Progress aria-label="Storage space" value={18} />

<VStack>
  <For
    each={[
      {
        colorScheme: "green",
        value: 19,
        size: "xs",
      },
      {
        colorScheme: "pink",
        value: 93,
        size: "sm",
      },
      {
        colorScheme: "purple",
        value: 8,
        size: "md",
      },
      {
        colorScheme: "red",
        value: 18,
        size: "lg",
      },
    ]}
  >
    {({ colorScheme, value, size }, index) => (
      <Progress
        key={index}
        aria-label="Storage space"
        colorScheme={colorScheme}
        value={value}
        size={size}
      />
    )}
  </For>
</VStack>

<Progress aria-label="Storage space" colorScheme="purple" value={18} />

<Progress aria-label="Storage space" filledTrackColor="green.500" value={18} />

<VStack>
  <Progress
    aria-label="Storage space"
    colorScheme="orange"
    value={10}
    borderRadius="sm"
  />
  <Progress
    aria-label="Storage space"
    colorScheme="yellow"
    value={31}
    rounded="md"
  />
</VStack>

<Progress aria-label="Storage space" hasStripe value={19} />

<Progress aria-label="Storage space" hasStripe isStripeAnimation value={20} />

<Progress isAnimation />