Progress | NativeBase | Universal Components for React and React Native

Show Code
Playground
const Example = () => {
  return <Box w="100%">
      <Progress w="300" shadow={2} value={45} mx="4" />
    </Box>;
};
const Example = () => {
  return <Box w="100%">
      <Progress w="300" shadow={2} value={45} mx="4" />
    </Box>;
};

Copy
import { Progress } from 'native-base';

Playground
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress value={45} mx="4" />
      </Box>
    </Center>;
};
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress value={45} mx="4" />
      </Box>
    </Center>;
};

Playground
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <VStack space="md">
          <VStack mx="4" space="md">
            <Progress colorScheme="primary" value={35} />
            <Progress colorScheme="secondary" value={45} />
            <Progress colorScheme="emerald" value={55} />
            <Progress colorScheme="warning" value={65} />
            <Progress colorScheme="light" value={75} />
          </VStack>
        </VStack>
      </Box>
    </Center>;
};
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <VStack space="md">
          <VStack mx="4" space="md">
            <Progress colorScheme="primary" value={35} />
            <Progress colorScheme="secondary" value={45} />
            <Progress colorScheme="emerald" value={55} />
            <Progress colorScheme="warning" value={65} />
            <Progress colorScheme="light" value={75} />
          </VStack>
        </VStack>
      </Box>
    </Center>;
};

Playground
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <VStack space="md">
          <VStack mx="4" space="md">
            <Progress size="xs" mb={4} value={25} />
            <Progress size="sm" mb={4} value={35} />
            <Progress size="md" mb={4} value={45} />
            <Progress size="lg" mb={4} value={55} />
            <Progress size="xl" mb={4} value={65} />
            <Progress size="2xl" mb={4} value={75} />
          </VStack>
        </VStack>
      </Box>
    </Center>;
};
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <VStack space="md">
          <VStack mx="4" space="md">
            <Progress size="xs" mb={4} value={25} />
            <Progress size="sm" mb={4} value={35} />
            <Progress size="md" mb={4} value={45} />
            <Progress size="lg" mb={4} value={55} />
            <Progress size="xl" mb={4} value={65} />
            <Progress size="2xl" mb={4} value={75} />
          </VStack>
        </VStack>
      </Box>
    </Center>;
};

Playground
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress rounded="0" value={65} mx="4" />
      </Box>
    </Center>;
};
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress rounded="0" value={65} mx="4" />
      </Box>
    </Center>;
};

Playground
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress bg="coolGray.100" _filledTrack={{
        bg: "lime.500"
      }} value={75} mx="4" />
      </Box>
    </Center>;
};
const Example = () => {
  return <Center w="100%">
      <Box w="90%" maxW="400">
        <Progress bg="coolGray.100" _filledTrack={{
        bg: "lime.500"
      }} value={75} mx="4" />
      </Box>
    </Center>;
};