Carbon: Progress Bar component

[joshua-vaughn]

Summary

I would expect Carbon to have a Progress Bar component. Carbon has a Progress Indicator component to illustrate the steps in a process like a wizard. In contrast, a Progress Bar component is used to illustrate the percent-complete status of a long running process.

Justification

The Cloud Pak for Data UX team needs a Progress Bar to illustrate the percent-complete status of an installation process. This seems like a common UI component in several other design systems.

Desired UX and success metrics

A user can easily see the percent-complete status of a long running process with a colored bar graph and a number.

"Must have" functionality

A user can easily see the percent-complete status of a long running process with a colored bar graph and a number.

Additional information may appear above or below the progress bar, such as:

• Estimated time remaining (e.g., 2 min remaining)
• Speed of the process (e.g., 206 Mb/s)
• The current step of the process (e.g., Checking CPU on host 9.76.63.174)

Specific timeline issues / requests

The Cloud Pak for Data UX team is currently designing a new installer for potential release in August 2019.

Available extra resources

We have a proposed design for the component in Sketch. A screenshot is attached.

[asudoh]

CC @carbon-design-system/design to see if there is an interest in the team. I thought we had some discussions around it, but completely slipped off my mind wrt where.

[aagonzales]

There is interest in this. We would need to take the component through a review process.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[joshua-vaughn]

Still necessary, it's just on the backburner for now

[mariuszmickiewicz]

My team is interested in this component too. Meanwhile we came with a slightly different style.
https://ibm.invisionapp.com/share/GRNZ3Q843A2#/319182290_list

I would be happy to update to the thicker version presented above if this becomes the standard. I think it is worth checking is the text supporting the progress bar should be part of it or not or how to deal with text positioning for different contexts etc. It would be great if the color of the progress bar in the component wasn't locked to one color - for example we need to differentiate between upload and processing phase.

Thank you,
Mariusz

[jillbyra]

I need this type of component currently as well. For now Im using something very similar to the screenshot attached in this issue

[shixiedesign]

We can definitely prioritize this as one of the next components to build out. Meanwhile, we are short on resources so if anyone is willing to contribute design & code, we would really appreciate it!

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[chrisconnors-ibm]

KeepAliveBot

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[laurenmrice]

not stale

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[sharpcodepro]

Hi all. Is there any progress on the progress bar component?

[rlclaar]

I am also interested in this progress bar component. I would like to use it in a situation where something is happening in the background, and the user needs to know the status while continuing to work in the foreground.

[janhassel]

Since this is quite a common component and I think many teams (including ours) would need it, could this be a candidate to bring over from Cloud PAL and add to the external core library?

[fangshih]

Hey, Any progress on this component? I am also interested in this progress bar component. Our product needs to use it for system updates. It usually takes a long time and will happen in the background, so it will be very helpful for them to come back and able to see the progress is moving forward and still working. Thanks!