doubleCircle loader

Author: wangdicoder

.idea/workspace.xml

@@ -6,6 +6,7 @@ A useful indicator component for React Native
 
 <img src="/screenshot/ss1.gif" width="372" height="666" />
 <img src="/screenshot/ss2.gif" width="372" height="666" />
+<img src="/screenshot/ss3.gif" width="372" height="666" />
 
 ## Installation
 
@@ -41,6 +42,7 @@ Here is currently available types:
 - LinesLoader
 - MusicBarLoader
 - EatBeanLoader
+- DoubleCircleLoader
 
 ```
 render(){
@@ -59,8 +61,9 @@ render(){
 
 | prop | type | default | description |
 | ---- | ---- | ---- | ---- |
-| size | number | 10 | circle's size |
+| size | number | 30 | circle's size |
 | color | string | '#1e90ff' | the indicator's color |
+| frequency | number | 500 | scale's frequency |
 
 
 ##### DotsLoader
@@ -146,6 +149,14 @@ render(){
 | size | number | 30 | the indicator's size |
 
 
+##### DoubleCircleLoader
+
+| prop | type | default | description |
+| ---- | ---- | ---- | ---- |
+| size | number | 30 | circle's size |
+| color | string | '#1e90ff' | the indicator's color |
+
+
 ## License
 
 MIT

README.md

@@ -13,6 +13,7 @@ import Breathing from './lib/loader/BreathingLoader';
 import Lines from './lib/loader/LinesLoader';
 import Music from './lib/loader/MusicLoader';
 import EatBean from './lib/loader/EatBeanLoader';
+import DoubleCircle from './lib/loader/DoubleCircleLoader';
 
 export const PulseLoader = Pulse;
 export const DotsLoader  = Dots;
@@ -23,4 +24,5 @@ export const RippleLoader = Ripple;
 export const BreathingLoader = Breathing;
 export const LinesLoader = Lines;
 export const MusicBarLoader = Music;
-export const EatBeanLoader = EatBean;
+export const EatBeanLoader = EatBean;
+export const DoubleCircleLoader = DoubleCircle;

index.js

@@ -0,0 +1,68 @@
+/**
+ * Created by wangdi on 15/12/16.
+ */
+'use strict';
+
+import React, {Component, PropTypes} from 'react';
+import {Animated, ART} from 'react-native';
+const {Surface} = ART;
+import AnimatedCircle from '../animated/AnimatedCircle';
+
+export default class DoubleCircleLoader extends Component {
+    static propTypes = {
+        color: PropTypes.string,
+        size: PropTypes.number
+    };
+
+    static defaultProps = {
+        color: '#1e90ff',
+        size: 30
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            scales: [new Animated.Value(0), new Animated.Value(0)]
+        };
+        this._animation = this._animation.bind(this);
+        this.timers = [];
+    }
+
+    render() {
+        const {color, size} = this.props;
+        return (
+            <Surface width={size} height={size}>
+                <AnimatedCircle radius={size} fill={color} opacity={0.5}
+                                scale={this.state.scales[0]} x={size/2} y={size/2}/>
+                <AnimatedCircle radius={size} fill={color} opacity={0.5}
+                                scale={this.state.scales[1]} x={size/2} y={size/2}/>
+            </Surface>
+        );
+    }
+
+    componentDidMount() {
+        this.state.scales.forEach((item, i) => {
+            const id = setTimeout(() => {
+                this._animation(i);
+            }, i * 1000);
+            this.timers.push(id);
+        });
+    }
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        this.timers.forEach((id) => {
+            clearTimeout(id);
+        });
+    }
+
+    _animation(i) {
+        Animated.sequence([
+            Animated.timing(this.state.scales[i], {toValue: 1, duration: 1000}),
+            Animated.timing(this.state.scales[i], {toValue: 0, duration: 1000})
+        ]).start(() => {
+            if (!this.unmounted)
+                this._animation(i);
+        });
+    }
+}

lib/loader/DoubleCircleLoader.js

@@ -12,12 +12,14 @@ import AnimatedCircle from '../animated/AnimatedCircle';
 export default class PulseLoader extends Component {
     static propTypes = {
         color: PropTypes.string,
-        size: PropTypes.number
+        size: PropTypes.number,
+        frequency: PropTypes.number
     };
 
     static defaultProps = {
         color: '#1e90ff',
-        size: 10
+        size: 30,
+        frequency: 500
     };
 
     constructor(props) {
@@ -31,8 +33,8 @@ export default class PulseLoader extends Component {
     render() {
         const {color, size} = this.props;
         return (
-            <Surface width={size*2} height={size*2}>
-                <AnimatedCircle radius={size} fill={color} scale={this.state.scale} x={size} y={size}/>
+            <Surface width={size} height={size}>
+                <AnimatedCircle radius={size} fill={color} scale={this.state.scale} x={size/2} y={size/2}/>
             </Surface>
         );
     }
@@ -47,8 +49,8 @@ export default class PulseLoader extends Component {
 
     _animation() {
         Animated.sequence([
-            Animated.timing(this.state.scale, {toValue: 0.2}),
-            Animated.timing(this.state.scale, {toValue: 1})
+            Animated.timing(this.state.scale, {toValue: 0.2, duration: this.props.frequency}),
+            Animated.timing(this.state.scale, {toValue: 1, duration: this.props.frequency})
         ]).start(() => {
             if (!this.unmounted)
                 this._animation();

lib/loader/PulseLoader.js

@@ -1,6 +1,6 @@
 {
   "name": "react-native-indicator",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "React Native Indicator Component",
   "main": "index.js",
   "scripts": {