Package Exports

react-circular-gradient-progress

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-circular-gradient-progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-circular-progress

Installation

  npm install react-circular-gradient-progress --save

Usage

import React from "react";
import { CircularProgress } from "react-circular-gradient-progress";

const HomePage: React.FunctionComponent = () => (
  <CircularProgress
    color="#F00"
    size={size}
    progress={progress}
  />
)

export default HomePage;

Props

Component accepts several self-descriptive properties:

CircularProgress

color (String) - Color for the circle.

GradientCircularProgress

startColor (String) - Start Color for the circle.
middleColor (String) - MIddle Color for the circle.
endColor (String) - End Color for the circle.

Common Props

id (String | null) - The html id attribute.
size (Number) - This is diameter of the circle.
progress (Number) - The progress. (0 to 100).
strokeWidth (Number) - This weight of the circle. (default is 6px).
emptyColor (String) - The color of the circle that is not filled. (default is lightgrey).
withSnail (Boolean | null) - A dot at the end of the circle that follows the progress.
classes (Object | null) - Class names that can be applied to the component.

  classes?: {
    indicator: {
      progression: string;
      container: string;
      empty: string;
    };
    snail: string;
    textContent: {
      container: string;
      text: string;
    };
  };

Circular Progress with snail

Alt text

Gradient Circular Progress

Alt text