Progress 进度条组件 #

import { Progress } from '@chakra-ui/react'

function Example() {
  return <Progress value={60} />
}

<Progress colorScheme="green" value={60} />
<Progress colorScheme="red" value={60} />
<Progress colorScheme="blue" value={60} />
<Progress colorScheme="orange" value={60} />

<Progress size="xs" value={60} />
<Progress size="sm" value={60} />
<Progress size="md" value={60} />
<Progress size="lg" value={60} />

<Progress variant="outline" value={60} />
<Progress hasStripe value={60} />
<Progress hasStripe isAnimated value={60} />

<Progress size="xs" isIndeterminate />

function FileUploadProgress({ progress, fileName }) {
  return (
    <Box>
      <HStack justify="space-between" mb={2}>
        <Text fontSize="sm">{fileName}</Text>
        <Text fontSize="sm" color="gray.500">{progress}%</Text>
      </HStack>
      <Progress 
        value={progress} 
        size="sm" 
        colorScheme={progress === 100 ? 'green' : 'blue'}
        hasStripe 
        isAnimated 
      />
    </Box>
  )
}

function StepProgress({ currentStep, totalSteps }) {
  const progress = (currentStep / totalSteps) * 100

  return (
    <Box>
      <HStack justify="space-between" mb={2}>
        <Text fontSize="sm">步骤 {currentStep} / {totalSteps}</Text>
        <Text fontSize="sm" color="gray.500">{Math.round(progress)}%</Text>
      </HStack>
      <Progress value={progress} size="sm" colorScheme="blue" />
    </Box>
  )
}