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:

Name	Type	Required	Default	Description
color	string	false	'#00bcd4'	The progress indicator's color. Must be a valid CSS color string.
size	number or string	false	16	A number or string designating the size of the SVG. If a string, the property must be a valid CSS height and width value.
margin	string	false	undefined	A valid CSS margin string.
strokeWidth	number	false	5	Stroke width of the progress indicator.