Background/Goal
A determinate variant of the ProgressBar component needs to be introduced in Codex, so the projects can reuse it to indicate the system status and the remaining waiting time to users.
| This Figma frame contains the design specifications for this component. |
Known use case(s): describe known use cases for this component, including the project, team, and timeline
- The Release Engineering Team (cc: @dancy ) intends to use this feature in Scap/SpiderPig. SpiderPig is the web-based user interface for Scap, the deployment tool. During deployments, several stages can take a significant amount of time, and providing progress updates helps reduce user uncertainty. SpiderPig plans to use the ProgressBar component to indicate the level of completion for each deployment stage. [Add task if available]
User stories
As a designer and developer, I need to be able to reuse a system-compliant determinate ProgressBar, and make use of it to communicate to users the approximate amount of time that they'll need to wait for a page or section to be loaded.
Design considerations
Development considerations
Acceptance criteria
- A Vue 3 compatible version of the determinate ProgressBar variant is implemented
- The component meets design specifications
- The component is demonstrated on the Codex demo site
QA & Release
- QA and accessibility testing
- Inclusion in Codex release