react-svg-progress v1.2.0

react-svg-progress

An indefinite circular progress inspired by Google's progress indicator. Based off of https://github.com/nathanhoad/react-loading-animation.

Installation

With Yarn:

yarn install react-svg-progress

Or from NPM:

npm install react-svg-progress --save

Importing

Import react-svg-progress via ES6 default import:

import Progress from "react-svg-progress";

Or via Node's require:

const Progress = require("react-svg-progress").default;

Example

import Progress from "react-svg-progress";

render() {
    return (
        <div>
            <div>
                {`40px:`}
                <Progress size={40} strokeWidth={7} />
            </div>
            <div>
                {`Green:`}
                <Progress size={40} color={"green"} />
            </div>
            <div>
                {`In Button:`}
                <button className={`btn blue`} >
                    <Progress size={15} margin={"0 5px 0 0"} color={`#ffffff`} />
                    {`Button Text`}
                </button>
            </div>
        </div>
    )
}

Props

Note: react-svg-progress has full TypeScript definitions! You should automatically receive intellisense for all of the props documented below: