Progress

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={60} />
</VStack>

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={45}>
    <ProgressLabel>Uploading files...</ProgressLabel>
  </Progress>
</VStack>

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={75}>
    <ProgressLabel>Progress</ProgressLabel>
    <ProgressValue />
  </Progress>
</VStack>

<VStack gap={4} className="w-full max-w-md mx-auto">
  <Progress value={60} size="xs">
    <ProgressLabel>Extra small</ProgressLabel>
  </Progress>
  <Progress value={60} size="sm">
    <ProgressLabel>Small</ProgressLabel>
  </Progress>
  <Progress value={60} size="md">
    <ProgressLabel>Medium</ProgressLabel>
  </Progress>
  <Progress value={60} size="lg">
    <ProgressLabel>Large</ProgressLabel>
  </Progress>
</VStack>

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={80} colorPalette="green" />
  <Progress value={60} colorPalette="blue" />
  <Progress value={45} colorPalette="orange" />
  <Progress value={30} colorPalette="red" />
  <Progress value={70} colorPalette="purple" />
  <Progress value={50} colorPalette="gray" />
</VStack>

<VStack gap={4} className="w-full max-w-md mx-auto">
  <Progress value={0}>
    <ProgressLabel>Not started</ProgressLabel>
    <ProgressValue />
  </Progress>
  <Progress value={25}>
    <ProgressLabel>Getting started</ProgressLabel>
    <ProgressValue />
  </Progress>
  <Progress value={50}>
    <ProgressLabel>Halfway there</ProgressLabel>
    <ProgressValue />
  </Progress>
  <Progress value={100}>
    <ProgressLabel>Complete</ProgressLabel>
    <ProgressValue />
  </Progress>
</VStack>

<VStack gap={3} className="w-full max-w-md mx-auto">
  <Progress value={null}>
    <ProgressLabel>Loading...</ProgressLabel>
  </Progress>
</VStack>