Have ideas to improve npm?Join in the discussion! »

    react-radial-progress-indicator

    1.4.1 • Public • Published

    Bundle size GitHub issues CodeFactor GitHub license

    react-radial-progress-indicator

    A React component that displays a customisable circular progress indicator.

    The indicator can display segmented steps (like “you’re on step 3/10”), or a smooth sweep to any position around the ring (useful when progress is measured as a percentage).

    Features

    • Lightweight: ~2kb when minified and gzipped. No runtime dependencies.
    • Responsive: draws natively at the pixel density of your screen using HTML5 canvas.
    • Tweakable: colours, layout metrics, and text can be fine-tuned for your layout.
    • Animatable: animates between steps with customisable speed.

    Install

    Install with yarn…

    yarn add react-radial-progress-indicator
    

    …or npm:

    npm install react-radial-progress-indicator
    

    Examples

    Animated example

    For examples and usage, have a look at this storybook.

    Usage

    import React from 'react'
    import { RadialProgress } from 'react-radial-progress-indicator';
     
    const UsageExample = (props) => {
      return (
        <RadialProgress
          width={100}
          height={100}
          steps={10}
          step={3}
        />
      );
    );

    See the jsx tab in the storybook for more usage examples.

    API

    A full list of props available to customise the component can be found here: docs/api.md

    Install

    npm i react-radial-progress-indicator

    DownloadsWeekly Downloads

    180

    Version

    1.4.1

    License

    MIT

    Unpacked Size

    24.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar