1.0.6 • Published 4 years ago
react-native-animated-circular-progress v1.0.6
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
License
MIT