[Feature Request] Progress bar with multiple segments

[SukkaW]

Feature request

Overview

I want to implement something like this based on Radix Primitives Proress component.

Examples in other libraries

A similar feature request is submitted to shadcn ui (which uses Radix Primitives under the hood) twice, both get some upvotes:

• Stacked Progress bar shadcn-ui/ui#424
• Multi-value progress bar shadcn-ui/ui#3464

And here are some other implementations:

React Bootstrap has Stacked ProgressBar: https://react-bootstrap.netlify.app/docs/components/progress/#stacked

MUI has a very limited version (no customizable segments) with a buffer prop that looks like a video player progress bar: https://mui.com/material-ui/react-progress/#linear-buffer

Not a React component, but here is what Tabler implements: https://docs.tabler.io/ui/components/progress#multiple-progress-bars

And there are also https://www.npmjs.com/package/react-multi-progress (this one has thousands of weekly downloads) and https://www.npmjs.com/package/react-multi-segment-progress

Who does this impact? Who is this for?

A nested/stacked/multi-segment progress bar can be used for

• Video player play progress and buffer progress
• Show an overall success, failure, ongoing, and not yet started tasks progress ratio
• Multi-file upload-then-process progress, where the process would be a separate task after upload.

Real-world example: https://speed.cloudlare.com uses a stacked progress bar to visualize ongoing "Packet Loss Measurements" test: