@nozzlegear/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 @nozzlegear/react-svg-progress

Or from @nozzlegear/react-svg-progress">NPM:

npm install @nozzlegear/react-svg-progress --save

Importing

The component can be imported like so:

import { CircularProgress } from "@nozzlegear/react-svg-progress";
import CircularProgress from "@nozzlegear/react-svg-progress";

Example

import CircularProgress from "@nozzlegear/react-svg-progress";
function MyComponent() {
    return (
        <div>
            <div>
                {`40px:`}
                <CircularProgress size={40} strokeWidth={7} ></CircularProgress>
            </div>
            <div>
                {`Green:`}
                <CircularProgress size={40} color={"green"} ></CircularProgress>
            </div>
            <div>
                {`In Button:`}
                <button className={`btn blue`} >
                    <CircularProgress size={15} margin={"0 5px 0 0"} color={`#ffffff`} ></CircularProgress>
                    {`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: