Linear indicator

example/app.js

@@ -10,6 +10,7 @@ import {
   SkypeIndicator,
   UIActivityIndicator,
   WaveIndicator,
+  LinearIndicator
 } from 'react-native-indicators';
 
 Platform.select({
@@ -40,6 +41,7 @@ export default function init() {
             <View style={styles.flex}>
               <WaveIndicator color='white' />
             </View>
+
 
             <View style={styles.flex}>
               <WaveIndicator color='white' waveMode='outline' />
@@ -87,6 +89,10 @@ export default function init() {
                 animationDuration={800}
               />
             </View>
+
+            <View style={styles.flex}>
+              <LinearIndicator  color='white' animationDuration={600}/>
+            </View>
           </View>
         </View>
       );

index.js

@@ -8,6 +8,7 @@ import PulseIndicator from './src/components/pulse-indicator';
 import SkypeIndicator from './src/components/skype-indicator';
 import UIActivityIndicator from './src/components/ui-activity-indicator';
 import WaveIndicator from './src/components/wave-indicator';
+import LinearIndicator from './src/components/linear-indicator'
 
 export {
   Indicator,
@@ -20,4 +21,5 @@ export {
   SkypeIndicator,
   UIActivityIndicator,
   WaveIndicator,
+  LinearIndicator
 };

readme.md

@@ -49,6 +49,7 @@ import {
   SkypeIndicator,
   UIActivityIndicator,
   WaveIndicator,
+  LinearIndicator
 } from 'react-native-indicators';
 
 class Example extends Component {
@@ -146,6 +147,21 @@ class Example extends Component {
 
 Possible values for `waveMode` are `fill` and `outline`
 
+## LinearIndicator properties
+
+ name              | description              | type   | default
+:----------------- |:------------------------ | ------:|:------------
+ color             | Component color          | String | rgb(76, 208, 56)
+ width             | Component width in px    | Number | 450
+ height            | Component height in px   | Number | 16
+ animationDuration | Animation duration in ms | Number | 1100
+ borderWidth       | Component border width   | Number | 1
+ borderColor       | Component border color   | String | rgb(76, 208, 56)
+ indicatorColor    | Indicator color          | String | rgb(17, 139, 11)
+ indicatorWidth    | Indicator width          | Number | 50
+ indicatorHeight   | Indicator height         | Number | 16
+ trackWidth        | Indicator track width    | Number | 500
+
 ## Example
 
 ```bash

src/components/linear-indicator/index.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import { Animated, View } from 'react-native';
+
+const LinearIndicator = ({trackWidth=500,animationDuration=1100,height=16,color='rgb(76,208,56)',borderWidth=1,borderColor='rgb(76,208,56)',indicatorColor="rgb(17, 139, 11)",width=450,indicatorWidth=50,indicatorHeight=16}) => {
+  const leftValue=useState(new Animated.Value(0))[0]
+
+  useEffect(() => {Animated.loop(
+    Animated.timing(leftValue, {
+      toValue: trackWidth,
+      duration: animationDuration,
+      useNativeDriver: true,
+    })).start()
+  }, []);
+
+  return (
+    <View style={{ width: width,
+      height: height,
+      backgroundColor: color,
+      borderWidth: borderWidth,
+      borderColor:borderColor,
+      opacity:0.7
+    }}>
+    <Animated.View
+      style={[{
+        width: indicatorWidth,
+        height: indicatorHeight,
+        transform: [{ translateX: leftValue }],
+        borderRadius: 2,
+        backgroundColor: indicatorColor,
+
+    }]}>
+      </Animated.View>
+      </View>
+  )
+}
+
+export default LinearIndicator

src/components/linear-indicator/styles.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+});