React Multi Segment Progress

!Demo


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

Installation

``bash
npm install react-multi-segment-progress
`

Usage

`tsx
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 (
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 |

$3

`typescript
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

$3

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

;
`

$3

`tsx
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" },
];

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

Browser Support

- Chrome
- Firefox
- Safari
- Edge

License

MIT © David Arozarena