A react component library for rending beautiful progress circle animations.

We have installed in-orbit using npm i in-orbit or yarn add in-orbit. Now let's import what we need. ProgressIterator is required. Available progress circle animations include Basic, Revolve, and Hazard. Choose one or all of them.

  import React from 'react';
  import { ProgressIterator, Basic, Hazard, Revolve } from 'in-orbit';

// w/o array provided to ProgressIterator 
const Component = () => {
  return (
    <ProgressIterator>
      {({ percent }) => <Revolve percent={percent} />}
    </ProgressIterator>
  );
};
export default Component;

In the above example, we just want to use the animation. percent is a required prop passed from ProgressIterator children to the animation component. It must be passed to the animation component in order for it to render properly.

// w array provided to ProgressIterator, currentIndex becomes available in children
const colors = ['red', 'white', 'blue', 'green', 'orange'];
const Component = () => {
  return (
    <ProgressIterator paginateArr={colors}>
      {({ percent, currentIndex }) => <Revolve percent={percent} color={colors[currentIndex]} genesis flash />}
    </ProgressIterator>
  );
};
export default Component;

We have an array that we want to paginate through. We pass the array to the ProgressIterator component using the paginateArr prop. currentIndex is now made available in children along with percent. When the animation is completed, currentIndex is updated with the next index. ProgressIterator will continuously cycle through all indices of the provided array. In the above example, whenever the animation completes, we want the color of the animation to change.

Documentation The above documentation is hosted on Heroku. A server may need to be spun to server the content if the page hasn't been accessed for some time. Loading times may be slow, and on first load the page may show an application error. Just reload the page again and the content will be served.