react-native-animated-circular-progress

Animated circular progress components for React Native project, with all pure React Native API

Component API

[AnimatedCircularProgress]

AnimatedCircularProgress

import AnimatedCircularProgress from 'react-native-animated-circular-progress';

<AnimatedCircularProgress
    backgroundColor='red'
    color='green'
    startDeg={45}
    endDeg={120}
    radius={60}
    innerRadius={40}
    duration={1000}
/>;

You also use CircularProgress without inner Circle

<AnimatedCircularProgress
    startDeg={45}
    endDeg={120}
    innerRadius={0}
    duration={300}
    style={{ marginTop: 10 }}
/>

Props

| Name | Description | Type | Required | Default Value | | :-------------- | :------------------------------------------------------------------------------------------------------------------------------- | :----- | :------: | :------------------------------------------------------------------: | | backgroundColor | The background color of CircularProgress | String | | '#eeeeee' | | color | The color of CircularProgress | String | | '#1e88e5' | | startDeg | Start degree of CircularProgress, where animation start (0-360) | Number | | 0 | | endDeg | End degree of CircularProgress, where animation end (0-360), greater than startDeg | Number | | 360 | | radius | Radius of outer CircularProgress | Number | | 100 | | innerRadius | Radius of inner CircularProgress | Number | | 80 | | innerBackgroundColor | Background color of inner CircularProgress | String | | transparent | | duration | Time in ms, animation processing during this time. Actually animation time is duration / (endDeg - startDeg) smaller than radius | Number | | 1000 | | children | The children to render inside this component | Node | | null | | style | The custom styling which will be applied to the container of the children | Style | | null |

Installation

yarn add react-native-animated-circular-progress

or

npm install react-native-animated-circular-progress

Author

Dinh Huynh

License

MIT