Progress bar

[lyubomir-popov]

This is a stub issue to add the progress bar that @edlerd @anasereijo

A pattern in Vanilla needs to be flexible enough that it can be used across a wide range of scenarios and shouldn't be constrained to a specific number of applications.

Visual

Provide a screenshot or link to a prototype of your pattern proposal.

Context

Where and when might this proposed pattern be used?

State

Does this pattern have state? If so, what are the different states (e.g. accordion with closed/open states)?

Progressive enhancement

A pattern should be designed small screen first. How does this pattern scale up? How will this pattern degrade on less competent browsers?

[anasereijo]

@lyubomir-popov see below a screenshot of a progress bar we have on snapcraft

[edlerd]

Some screenshots of the prototype above. Currently, just a gray box filled with a green bar.

A state variable with the current percentage (number from 0 to 100) is passed to it.

It is used during an upload process, which triggers some longer running backed processing of the provided file.

Prototype is embedded in a stepped list component, as suggested in the Vanilla working group. Also split it into two dedicated progress bars for steps 1 and 3, because steps 2 and 4 are undetermined (but should both be quick, as they only zip/unzip files).

The PR for this prototype is at https://github.com/canonical/anbox-cloud-dashboard/pull/294

[DeveVivek]

Please assign me this task.

[bartaz]

@DeveVivek Thanks for the interest in contributing to Vanilla framework, but this issue unfortunately is not ready for development. It needs to go through our design team first.

[danielmutis]

@al-bakalova and @edlerd to fill in the issue information at the top. Alex will work on this as part of her LXD work.