Skip to content

πŸŒ€ A friendly loading indicator component for React Native

License

Notifications You must be signed in to change notification settings

wangdicoder/react-native-indicator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

56 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-native-indicator

npm npm npm

A useful indicator component for React Native

Installation

Make sure that you are in your React Native project directory and run:

$ npm install react-native-indicator --save 
$ npm install @react-native-community/art --save

For react-native >= 0.60 ReactNativeART should be auto-linked and no additional action is required.

For react-native < 0.60 you need to link ReactNative ART:

$ react-native link @react-native-community/art

More info, following the Art module instruction to configure.

Usage

Import react-native-indicator as a JavaScript module:

import { CirclesLoader, PulseLoader, TextLoader, DotsLoader, ... } from 'react-native-indicator';

Here is currently available types:

render(){
  return(
    <View>
      <CirclesLoader />
      <TextLoader text="Loading" />
    </View>
  ); 
}

Props

prop type default description
size number 30 circle's size
color string '#1e90ff' indicator's color
frequency number 1000 scale's frequency
prop type default description
size number 10 dot's size
color string '#1e90ff' indicator's color
betweenSpace number 5 distance between two dots
prop type default description
text string 'Loading' contents
textStyle style inherited text's style
prop type default description
size number 40 circle's size
color string '#1e90ff' indicator's color
dotRadius number 10 each dot's size
prop type default description
size number 40 circle's size
color string '#1e90ff' indicator's color
dotRadius number 8 each dot's size
prop type default description
size number 10 circle's size
color string '#1e90ff' indicator's color
strokeWidth number 3 outline width
frequency number 800 scale's frequency
prop type default description
size number 10 circle's size
frequency number 1600 scale's frequency
color string '#1e90ff' indicator's color
strokeWidth number 3 outline width
prop type default description
color string '#1e90ff' indicator's color
barWidth number 5 each bar's width
barHeight number 40 each bar's height
barNumber number 5 the number of bar
betweenSpace number 2 distance between two bars
prop type default description
color string '#1e90ff' indicator's color
barWidth number 3 each bar's width
barHeight number 30 each bar's height
betweenSpace number 5 distance between two bars
prop type default description
color string '#1e90ff' indicator's color
size number 30 indicator's size
prop type default description
size number 30 circle's size
color string '#1e90ff' indicator's color
prop type default description
size number 30 indicator's size
color string '#1e90ff' indicator's color
rotationSpeed number 800 rotation speed
prop type default description
size number 40 indicator's size
color string '#1e90ff' indicator's color
rotationSpeed number 800 rotation speed
strokeWidth number 8 circle outline's width
prop type default description
size number 50 indicator's size
color string '#1e90ff' indicator's color
prop type default description
size number 20 each cube's size
color string '#1e90ff' indicator's color

warning: this indicator will occupy a whole horizontal space automatically, which means you don't need to set any center props. Just keeping the direction of its parent View is vertical.

prop type default description
size number 10 dot's size
color string '#1e90ff' indicator's color
dotsNumber number 5 the number of dots
betweenSpace number 5 distance between two dots
prop type default description
size number 15 each cube's size
betweenSpace number 7 distance between two dots
color1 string '#ff4500'(red) 1st color
color2 string '#ffd700'(yellow) 2nd color
color3 string '#9acd32'(green) 3rd color
OpacityDotsLoader
prop type default description
size number 10 dot's size
color string '#1e90ff' indicator's color
betweenSpace number 5 distance between two dots
speed number 200 change speed

License

MIT

About

πŸŒ€ A friendly loading indicator component for React Native

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •