/react-circular-progress

Primary LanguageTypeScriptMIT LicenseMIT

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