React Multi Segment Progress

A React progress bar component that supports multiple segments with overlapping effect. Perfect for showing multiple progress states in a single bar.

Installation

npm install react-multi-segment-progress

Usage

import { MultiSegmentProgress } from "react-multi-segment-progress";

const MyComponent = () => {
  const segments = [
    { id: "completed", percentage: 30, color: "#52c41a", label: "Completed" },
    {
      id: "in-progress",
      percentage: 20,
      color: "#fa8c16",
      label: "In Progress",
    },
    { id: "pending", percentage: 50, color: "#d9d9d9", label: "Pending" },
  ];

  return (
    <MultiSegmentProgress
      segments={segments}
      height={12}
      borderRadius={6}
      backgroundColor="#f5f5f5"
      showTooltips
    />
  );
};

Props

| Prop | Type | Default | Description | | ----------------- | ----------- | ----------- | ------------------------------------------- | | segments | Segment[] | required | Array of segments to display | | height | number | 12 | Height of the progress bar in pixels | | backgroundColor | string | '#E4E5E6' | Background color of the progress bar | | showTooltips | boolean | true | Whether to show tooltips on hover | | borderRadius | number | 0 | Border radius of the progress bar in pixels |

Segment Type

interface Segment {
  id: string; // Unique identifier for the segment
  percentage: number; // Percentage of the total width (0-100)
  color: string; // Background color of the segment
  label?: string; // Optional label for tooltip
}

Features

• 🎨 Customizable colors and dimensions
• 🔄 Overlapping segments with smooth transitions
• 💡 Tooltips on hover
• 🎯 Rounded corners support
• 📱 Responsive design

Examples

Basic Usage

const segments = [
  { id: "1", percentage: 40, color: "#52c41a", label: "Completed" },
  { id: "2", percentage: 60, color: "#d9d9d9", label: "Remaining" },
];

<MultiSegmentProgress segments={segments} />;

With Custom Styling

const segments = [
  { id: "1", percentage: 30, color: "#722ed1", label: "Phase 1" },
  { id: "2", percentage: 45, color: "#1890ff", label: "Phase 2" },
  { id: "3", percentage: 25, color: "#13c2c2", label: "Phase 3" },
];

<MultiSegmentProgress
  segments={segments}
  height={20}
  borderRadius={10}
  backgroundColor="#f0f0f0"
/>;

Browser Support

• Chrome
• Firefox
• Safari
• Edge

License

MIT © David Arozarena