Refresh indicator in material design

Usage #

This package is written in ES6. Maybe you should use this package with webpack + babel + babel-runtime.

Perhaps you should overwrite prefixed method of this component by mixin to implement the autoprefix feature. The default behaviour will not autoprefix for css3 property name.

$ npm install react-refresh-indicator --save

RefreshIndicator.propsType = {
  // size in pixel
  size: React.PropTypes.number,
  // percentage is 100 always means the user comfirm to reload.
  percentage: React.PropTypes.number,
  // RefreshIndicator position is absolute. Please give a correct positioned container.
  left: React.PropTypes.number.isRequired,
  top: React.PropTypes.number.isRequired,
  // status is an enum. It can be "ready" "loading" or "hide"
  // ready: This phase give user a chance to confirm to fetch data. Display upon the percentage prop.
  // loading: This means data fetch has began. Display a spinning animated arc.
  // hide: Finished and hide to specified left and top with animation.
  status: React.PropTypes.oneOf(["ready", "loading", "hide"]).isRequired,
};

RefreshIndicator.defaultProps = {
  size: 60,
  percentage: 0,
};

Examples #

A static state indicator

Render RefreshIndicator directly. You can modify the props of the component to see the change.

JSX is optional and not required to use React. Try clicking on "Compiled JS" to see the raw JavaScript code produced by the JSX compiler.

A complete and complex example

You can press down your mouse within the right side box. Then move down. And then release. That's all.