@erickcrus/three-dots-loader
v0.0.8
Published
lightweight three dots animation library for react-native
Downloads
13
Maintainers
Readme
@erickcrus/three-dots-loader
A lightweight react-native three-dots-loader
Installation
npm install @erickcrus/three-dots-loader
Usage
import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Loader from '@erickcrus/three-dots-loader';
const AppScreen = () => {
const [ loading, setLoading ] = useState(false);
const onPress = () => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 1250);
}
return <View style={{ flex:1 }}>
<View style={{ flex:1 }}>
<Text>Press button to test</Text>
</View>
<TouchableOpacity style={{
flex:0,
backgroundColor: '#00b9fc',
paddingVertical:10,
width:'82%',
alignSelf: 'center',
borderRadius: 10
}} onPress={onPress}>
{loading ?
<Loader size={8} color='#FFF' /> :
<Text style={{color:'#FFF'}}>Test</Text>}
</TouchableOpacity>
</View>;
}
Properties
|Prop |Type |Default |Description |
|-------------------|:---------:|-----------|---------------------------|
|size |number |required |Size of dots |
|animationDuration |number |600
|Animation duration in ms |
|color |string |#00b9fc
|Dots color |
|spacing |number |3
|Dots horizontal margin |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT