1.0.0 • Published 1 year ago
react-native-loading-indicator v1.0.0
LoadingIndicator
A better alternative to React Native's default ActivityIndicator
Installation
npm install react-native-loading-indicatoror
yarn add react-native-loading-indicatorFeatures
- A beautiful collection of animations
- Crisp and clean. No images. Everything you see is achieved using the Animated API and React Native components
- Highly customisable. Control the speed, style, iteration count etc
- Show identical animation across all Platforms
Usage
Just import the component and start using it
import LoadingIndicator from 'react-native-loading-indicator';
const App = () => <LoadingIndicator loading={true} />;Props
| Props | Default | Type | Description |
|---|---|---|---|
| loading | false | boolean | Set to true to show the LoadingIndicator |
| indicatorStyle | {} | object | override the default indicator styles |
| duration | - | int | control the speed of the animation by reducing or increasing the animation duration |
| bezierFn | - | string | control the easing of the animation using cubic bezier function |
| iterations | -1 | number | number of times the animation should loop. default is infinite |
| callback | () => {} | function | callback function to call after completing the animation if an iteration other than '-1' is specified. |
| animationName | squareFlip | string | animation style name. available styles 'squareFlip', 'circleScale' |
Note
Since the LoadingIndicator color is white by default, set a background color to see it in action.
Inspiration
Animations ported from SpinKit by Tobias Ahlin.
License
MIT