Loader

Loader is a React component to animate tap logo. It is developed using Lottie and After Effects software. Component modifiable features are color, size, and duration/speed.

Color replacement

Modify the data.json file (the animation src) by using this website: Color editor Second URL. Animation json source file will be found in the gitHub repo. To implement a different color animation, refer to the Advanced implementation section.

Loader with closing animation

To get a closing animation, refer to the Adding a closing animation

Demo

• Source Code - no demo.

Animation Files

Animation JSON files are available in the src file

• AnimationData.

Install the package

npm i --save @tap-payments/loader

Usage

1. Import the loader component.

import {Loader} from '@tap-payments/loader'

2. Wrap the loader component in a container.

<div>
  <Loader
  toggleAnimation={this.state.animating}
  duration={5}
  />
</div>

3. Toggle it with a true/false variable to control the animation.
4. Pass {true} to toggleAnimation to start the animation immediately.
5. Pass {false} to toggleAnimation to stop the animation whenever it is possible.

Advanced

This component can be used to control any animation. To pass the animation source, import it in the parent component and pass it to the Loader component, the default duration is 10 sec, if the file has different duration, it should be passed also.

example:

Import the animation file:

import * as animationData from './data.json'

Pass it to the component, suppose that the new animation duration is 5 sec.

<Loader
toggleAnimation={this.state.animating}
duration={5.0}
animationData={animationData}
dataDuration={5.0}
/>

It is possible to change the duration of the animation by controlling duration prop, but dataDuration prop should be similar to the exporting settings in After Effects, in Tap Loader it is 10.0 sec.

Closing_Animation

Another animation can be integrated with the regular loading animation. This is done for the purpose of success, error and warning closing animation. To add the closing animation, pass the data of the closing animation as a json file in the props and it will be shown when the original animation is finished.

example:

Import the animation file:

import * as successAnimation from './success.json'

Pass it to the component.

  <Loader
  toggleAnimation={this.state.animating}
  duration={this.state.animating?3.5:2}
  animationData={animationData}
  secondData={successAnimation}
  secondDuration={10}
  />

duration= {this.state.animating?3.5:2} // the duration of the original motion, an 'if' condition is used to make the loader close faster.
animationData={animationData} // the animation src file of the loader
secondData= {successAnimation} // the animation src file of the closing animation
secondDuration = {10} // the duration of the closing animation, 10 = 100% of the AE file

To change the duration of the closing animation, change secondDuration and it will act as a percentage of the src file duration. Default duration is 10. If the duration of AE file animation is known, use secondDuration with secondDataDuration to get the exact preferred duration.

Main Options

| Name | Type | Default | Description | | :--- | :---: | :---: | --- | |animationData|JSON|tap loader JSON file|the src file| |toggleAnimation|bool|false|Start/Stop controller| |duration|float|10.0|The duration of full animation| |dataDuration|float|10.0|The duration of the source file (from After Effects)| |completeIndicator|function|null|To indicate every full loop| |secondData|json|null|The src file of the second animation| |secondDuration|float|10.0|The duration of full animation (second animation)| |secondDataDuration|float|10.0|The duration of the source file of the second animation (from After Effects)|

Author

• Khaled N.