CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-circular-progressbar

A circular progress indicator component built with React and SVG

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

core-progressbar.mddocs/

Core Progress Display

The primary CircularProgressbar component provides SVG-based circular progress visualization with extensive customization options for displaying progress values.

Capabilities

CircularProgressbar Component

Main component for rendering circular progress indicators with full customization control.

/**
 * Primary circular progressbar component with extensive customization options
 * @param props - Component props including value, styling, and behavior options
 * @returns React component rendering SVG-based circular progressbar
 */
class CircularProgressbar extends React.Component<CircularProgressbarProps>;

interface CircularProgressbarDefaultProps {
  /** Whether to display background circle */
  background: boolean;
  /** Padding between background and path relative to total width */
  backgroundPadding: number;
  /** Ratio of full circle diameter to use (0-1) */
  circleRatio: number;
  /** CSS class names for SVG subcomponents */
  classes: {
    root: string;
    trail: string;
    path: string;
    text: string;
    background: string;
  };
  /** CSS classes to apply to the SVG element */
  className: string;
  /** Whether to rotate progressbar counterclockwise */
  counterClockwise: boolean;
  /** Maximum value for progress range */
  maxValue: number;
  /** Minimum value for progress range */
  minValue: number;
  /** Width of circular line relative to total width (0-100) */
  strokeWidth: number;
  /** Inline styles for SVG subcomponents */
  styles: CircularProgressbarStyles;
  /** Text to display inside the progressbar */
  text: string;
}

interface CircularProgressbarProps extends CircularProgressbarDefaultProps {
  /** Current progress value (required) */
  value: number;
}

interface CircularProgressbarWrapperProps {
  /** Current progress value (required) */
  value: number;
  /** Whether to display background circle */
  background?: boolean;
  /** Padding between background and path relative to total width */
  backgroundPadding?: number;
  /** Ratio of full circle diameter to use (0-1) */
  circleRatio?: number;
  /** CSS class names for SVG subcomponents */
  classes?: {
    root: string;
    trail: string;
    path: string;
    text: string;
    background: string;
  };
  /** CSS classes to apply to the SVG element */
  className?: string;
  /** Whether to rotate progressbar counterclockwise */
  counterClockwise?: boolean;
  /** Maximum value for progress range */
  maxValue?: number;
  /** Minimum value for progress range */
  minValue?: number;
  /** Width of circular line relative to total width (0-100) */
  strokeWidth?: number;
  /** Inline styles for SVG subcomponents */
  styles?: CircularProgressbarStyles;
  /** Text to display inside the progressbar */
  text?: string;
}

interface CircularProgressbarStyles {
  /** Styles for root SVG element */
  root?: React.CSSProperties;
  /** Styles for background trail path */
  trail?: React.CSSProperties;
  /** Styles for progress path */
  path?: React.CSSProperties;
  /** Styles for text element */
  text?: React.CSSProperties;
  /** Styles for background circle */
  background?: React.CSSProperties;
}

Default Values:

The component comes with the following default values (defined in CircularProgressbarDefaultProps):

const defaultProps: CircularProgressbarDefaultProps = {
  background: false,
  backgroundPadding: 0,
  circleRatio: 1,
  classes: {
    root: 'CircularProgressbar',
    trail: 'CircularProgressbar-trail',
    path: 'CircularProgressbar-path',
    text: 'CircularProgressbar-text',
    background: 'CircularProgressbar-background',
  },
  className: '',
  counterClockwise: false,
  maxValue: 100,
  minValue: 0,
  strokeWidth: 8,
  styles: {
    root: {},
    trail: {},
    path: {},
    text: {},
    background: {},
  },
  text: '',
};

Usage Examples:

import React from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

// Basic usage with percentage
function BasicProgress() {
  return (
    <div style={{ width: 100, height: 100 }}>
      <CircularProgressbar value={66} text="66%" />
    </div>
  );
}

// Custom value range
function CustomRange() {
  const score = 850;
  const maxScore = 1000;
  
  return (
    <div style={{ width: 150, height: 150 }}>
      <CircularProgressbar 
        value={score} 
        maxValue={maxScore}
        text={`${score}/${maxScore}`} 
      />
    </div>
  );
}

// With background and custom stroke width
function StyledProgress() {
  return (
    <div style={{ width: 200, height: 200 }}>
      <CircularProgressbar
        value={75}
        text="75%"
        background={true}
        backgroundPadding={6}
        strokeWidth={12}
      />
    </div>
  );
}

// Partial circle (semi-circle)
function SemiCircle() {
  return (
    <div style={{ width: 200, height: 100 }}>
      <CircularProgressbar
        value={80}
        text="80%"
        circleRatio={0.5}
        styles={{
          root: { transform: 'rotate(0.25turn)' },
          path: { transformOrigin: 'center center' },
          trail: { transformOrigin: 'center center' }
        }}
      />
    </div>
  );
}

Custom CSS Classes

Override default CSS class names for complete styling control.

/**
 * CSS class name overrides for SVG subcomponents
 */
interface CircularProgressbarClasses {
  /** Class name for root SVG element. Default: 'CircularProgressbar' */
  root: string;
  /** Class name for background trail path. Default: 'CircularProgressbar-trail' */
  trail: string;
  /** Class name for progress path. Default: 'CircularProgressbar-path' */
  path: string;
  /** Class name for text element. Default: 'CircularProgressbar-text' */
  text: string;
  /** Class name for background circle. Default: 'CircularProgressbar-background' */
  background: string;
}

Usage Example:

// Custom CSS classes for integration with CSS-in-JS libraries
function CustomClasses() {
  return (
    <CircularProgressbar
      value={60}
      text="60%"
      classes={{
        root: 'my-progress-root',
        trail: 'my-progress-trail',
        path: 'my-progress-path',
        text: 'my-progress-text',
        background: 'my-progress-bg'
      }}
    />
  );
}

Inline Styling

Direct style control through the styles prop for fine-grained customization.

/**
 * Inline style overrides for SVG subcomponents
 */
interface CircularProgressbarStyles {
  /** Styles applied to root SVG element */
  root?: React.CSSProperties;
  /** Styles applied to background trail path */
  trail?: React.CSSProperties;
  /** Styles applied to progress path */
  path?: React.CSSProperties;
  /** Styles applied to text element */
  text?: React.CSSProperties;
  /** Styles applied to background circle */
  background?: React.CSSProperties;
}

Usage Example:

// Direct inline styling
function InlineStyles() {
  return (
    <CircularProgressbar
      value={45}
      text="45%"
      styles={{
        root: {
          filter: 'drop-shadow(3px 3px 6px rgba(0,0,0,0.1))'
        },
        path: {
          stroke: '#f88',
          strokeLinecap: 'round',
          transition: 'stroke-dashoffset 0.5s ease 0s'
        },
        trail: {
          stroke: '#d6d6d6',
          strokeLinecap: 'round'
        },
        text: {
          fill: '#f88',
          fontSize: '16px',
          fontWeight: 'bold'
        },
        background: {
          fill: '#3e98c7',
          opacity: 0.1
        }
      }}
    />
  );
}

Install with Tessl CLI

npx tessl i tessl/npm-react-circular-progressbar

docs

content-integration.md

core-progressbar.md

index.md

style-customization.md

tile.json