🟢Progress
Github Tracker
Figma Reference https://www.figma.com/design/14ySC6RFgp4hxDcHfRbGSO/UDS---in-progress--?node-id=24823-34667&t=ygzvHHtz157q3TAy-4
Progress Bar
Overview:
The Progress Bar component visually communicates the status of an ongoing operation such as loading, uploading, or file transfers. It reassures users that a process is active and provides visibility into completion progress through percentage indicators and contextual labels.
Progress bars should be used when a task duration is known and expected to take longer than one second. They provide clear feedback through high-contrast colors, consistent labeling, and determinate states that show measurable progress toward completion.
Usage Guidelines
Use progress bars to inform users that a system action is actively processing and to communicate how much of the task has been completed.
When to use
Operations that take longer than 1–2 seconds
Loading or fetching data
File uploads or transfers
Saving or processing system tasks
Any process where completion percentage can be calculated
When not to use
Very fast operations (under one second)
Actions that complete instantly without noticeable delay
Situations where progress cannot be measured or estimated
Best practices
Always include text labels to provide context (e.g., Loading, Uploading files, Processing request)
Display percentage values when the completion progress is measurable
Maintain high contrast colors for readability and accessibility
Avoid indeterminate states when the duration is known
Ensure consistent placement and alignment of labels across layouts
Component Properties
style (enum)Options: grey, cta, alert
Purpose: Controls the visual color treatment of the progress bar.
Usage:
grey → neutral progress state
cta → emphasized progress using Dev Launchers CTA colors (Cosmic / Nebula)
alert → communicates status feedback such as warning, success, error, or info
Context: Styles align with existing Dev Launchers CTA and alert color tokens to maintain consistency across the design system.
status (enum)
Options: default, warning, success, error, info
Purpose: Represents the semantic meaning of the progress state when using the alert style.
Usage:
success → operation completed successfully
warning → process requires attention
error → operation failed
info → informational progress feedback
Context: Helps communicate system state clearly through color and iconography.
progress-value (number)
Purpose: Defines the completion percentage of the progress bar.
Usage:
0–100 → indicates percentage of completion
Context: Displayed visually through the progress fill and communicated textually through the percentage label.
label-text (string)
Purpose: Provides contextual information about the operation being performed.
Usage examples:
Loading assets
Uploading files
Processing request
Context: Helps users understand what task the progress bar represents.
breakpoint (enum)
Options: mobile-tablet, desktop-laptop
Purpose: Controls layout responsiveness.
Usage:
mobile-tablet → optimized for smaller screens desktop-laptop → optimized for larger layouts
Context: Automatically adapts when placed into responsive breakpoints.
Appearance Modes
The Progress Bar supports the following variable collections:
style
Semantic color variations:
grey → neutral default state
cta → emphasized progress using Dev Launchers CTA palette (Cosmic / Nebula)
alert → status-driven feedback colors
Alert substyles include:
warning
success
error
info
These styles allow the component to support multiple use cases while maintaining consistency with Dev Launchers design tokens and system alerts.
breakpoint
Layout responsiveness for different screen sizes:
mobile / tablet → optimized spacing and scaling for smaller devices
desktop / laptop → standard layout for larger screens
The component automatically adjusts when placed into responsive design breakpoints.
Label Placement
Progress labels follow consistent alignment rules for clarity and readability.
Labels are placed to the right of the progress bar, with:
Top label → contextual text description
Bottom label → percentage value
Labels are intentionally not placed inside the progress bar to maintain maximum readability and avoid contrast issues as progress fill changes.
Consistent right alignment prevents visual confusion and keeps information predictable across layouts.
Nested Components
The Progress Bar contains several nested elements:
Text Label Component Provides contextual information about the operation.
Percentage Text Component Displays the completion value (e.g., 45%).
Circle Check Icon Appears in completion states such as success to reinforce visual confirmation.
Accessibility Considerations ♿
Labeling All progress bars include descriptive labels to communicate state changes such as:
Loading
Error
Complete
These labels provide context for assistive technologies.Screen Reader Support
Progress values should be announced using ARIA attributes.
Recommended implementation:
This ensures screen readers correctly communicate progress updates.Contrast
All styles maintain WCAG AA compliant contrast ratios to ensure readability across themes and backgrounds.
State Communication
Color should not be the only indicator of status. Icons and labels should reinforce meaning.
Developer Notes
This component is non-interactive and should only communicate system status.
Implementation guidelines
Progress bars should:
Be updated dynamically through application state Reflect accurate completion percentages Update text labels alongside percentage values
Responsive behavior
When placed into layout breakpoints, the progress bar automatically adjusts to:
Mobile / Tablet layouts
Desktop / Laptop layouts
Spacing and alignment follow system tokens for consistency across screen sizes.
Unsupported Behaviors
The Progress Bar component is not designed to be interactive.
Users should not:
Click
Drag
Adjust
Manipulate progress values manually
Progress updates must be controlled entirely by the system or application state.
Deferred Enhancements
The following enhancements are planned for future iterations:
Predictive timing
Interactive labels displaying estimated time remaining.
Behavioral optimization
Data-driven progress behavior that adapts to real usage patterns.
Segmented progress states
Multi-stage progress indicators such as:
Draft
Review
Approved
Adaptive animation
Progress animations that move faster during early stages and slow as they approach completion to create perceived responsiveness.
Known Issues
No known issues.
Reference Links
WCAG 2.1 – Progress Indicator Accessibility ARIA Authoring Practices – Progressbar Pattern Dev Launchers Design Tokens (Color, Spacing, Radius)
Last updated
Was this helpful?