rc-progress

import { Line, Circle } from "rc-progress";
import type { ProgressProps } from "rc-progress";

const { Line, Circle } = require("rc-progress");

import Progress from "rc-progress";
// Usage: Progress.Line, Progress.Circle
// Progress is equivalent to { Line, Circle }

import React from "react";
import { Line, Circle } from "rc-progress";

export default function MyComponent() {
  return (
    <div>
      {/* Basic line progress bar */}
      <Line percent={75} strokeWidth={4} strokeColor="#2db7f5" />
      
      {/* Basic circle progress bar */}
      <Circle percent={75} strokeWidth={6} strokeColor="#2db7f5" />
      
      {/* Multi-segment progress */}
      <Line 
        percent={[30, 20, 25]} 
        strokeColor={["#108ee9", "#87d068", "#ff6b6b"]} 
      />
      
      {/* Circle with gradient */}
      <Circle 
        percent={80}
        strokeWidth={8}
        strokeColor={{
          "0%": "#108ee9",
          "100%": "#87d068"
        }}
      />
    </div>
  );
}

/**
 * Linear progress bar component
 */
const Line: React.FC<ProgressProps>;

/**
 * Circular progress bar component with advanced customization
 */
const Circle: React.FC<ProgressProps>;

interface ProgressProps {
  /** Unique identifier for the progress component */
  id?: string;
  /** Width of the progress stroke as percentage of SVG canvas size */
  strokeWidth?: number;
  /** Width of the trail stroke, defaults to strokeWidth if not specified */
  trailWidth?: number;
  /** CSS class name for styling */
  className?: string;
  /** Progress percentage(s) - supports single value or array for multi-segment */
  percent?: number | number[];
  /** Color(s) of the progress stroke - supports strings, gradients, and arrays */
  strokeColor?: StrokeColorType;
  /** Color of the background trail */
  trailColor?: string;
  /** Shape of stroke line endings */
  strokeLinecap?: StrokeLinecapType;
  /** CSS class prefix for internal elements */
  prefixCls?: string;
  /** Inline CSS styles applied to SVG element */
  style?: React.CSSProperties;
  /** Gap degree for circle component (0-360) */
  gapDegree?: number;
  /** Position of gap in circle component */
  gapPosition?: GapPositionType;
  /** CSS transition property for animations */
  transition?: string;
  /** Click event handler */
  onClick?: React.MouseEventHandler;
  /** Step configuration for discrete progress visualization */
  steps?: number | { count: number; gap: number };
}

// Multi-segment example
<Line 
  percent={[25, 35, 15]} 
  strokeColor={["#ff4d4f", "#52c41a", "#1890ff"]}
/>

// Stacked segments add up to total progress
<Circle 
  percent={[40, 30]} 
  strokeColor={["#ff7875", "#73d13d"]}
/>

// Linear gradient
<Circle 
  strokeColor={{
    "0%": "#108ee9",
    "50%": "#87d068", 
    "100%": "#ff6b6b"
  }}
/>

// Conic gradient - set conic: true for circular gradients
<Circle 
  percent={100}
  strokeColor={{
    conic: true,
    "0%": "#ff0000",
    "33%": "#00ff00",
    "66%": "#0000ff",
    "100%": "#ff0000"
  }}
/>

// Simple step count
<Circle steps={5} percent={60} />

// Steps with spacing
<Circle 
  steps={{ count: 8, gap: 2 }} 
  percent={75}
  strokeColor="#1890ff"
/>

// 90-degree gap at bottom
<Circle 
  gapDegree={90}
  gapPosition="bottom"
  percent={75}
/>

// Available positions: 'top', 'right', 'bottom', 'left'
<Circle 
  gapDegree={120}
  gapPosition="top"
  percent={50}
/>

/** Color object for gradients with percentage keys and optional conic flag */
type StrokeColorObject = Record<string, string> & { conic?: boolean };

/** Basic stroke color - string or gradient object */
type BaseStrokeColorType = string | StrokeColorObject;

/** Stroke color supporting arrays for multi-segment progress */
type StrokeColorType = BaseStrokeColorType | BaseStrokeColorType[];

/** Available gap positions for circle component */
type GapPositionType = 'top' | 'right' | 'bottom' | 'left';

/** SVG line cap styles */
type StrokeLinecapType = 'round' | 'butt' | 'square';

const defaultProps: Partial<ProgressProps> = {
  percent: 0,
  prefixCls: 'rc-progress',
  strokeColor: '#2db7f5',
  strokeLinecap: 'round',
  strokeWidth: 1,
  trailColor: '#D9D9D9',
  trailWidth: 1,
  gapPosition: 'bottom',
};

import React, { useState, useEffect } from "react";
import { Line, Circle } from "rc-progress";

function AnimatedProgress() {
  const [percent, setPercent] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setPercent(prev => prev >= 100 ? 0 : prev + 1);
    }, 100);
    return () => clearInterval(timer);
  }, []);
  
  return (
    <div>
      <Line percent={percent} strokeWidth={4} />
      <Circle percent={percent} strokeWidth={6} />
    </div>
  );
}

import React from "react";
import { Circle } from "rc-progress";

function InteractiveProgress() {
  const handleClick = (event: React.MouseEvent) => {
    console.log("Progress clicked!", event);
  };
  
  return (
    <Circle
      percent={85}
      strokeWidth={10}
      strokeColor="#52c41a"
      trailColor="#f0f0f0"
      className="my-progress"
      style={{ width: 200, height: 200 }}
      onClick={handleClick}
    />
  );
}

import React from "react";
import { Line } from "rc-progress";

function SegmentedProgress() {
  return (
    <Line
      percent={[20, 30, 25, 15]}
      strokeWidth={8}
      strokeColor={[
        "#ff4d4f", // Red segment
        "#faad14", // Orange segment  
        "#52c41a", // Green segment
        "#1890ff"  // Blue segment
      ]}
      strokeLinecap="round"
    />
  );
}