(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Progress Bar

...

[!WARNING] This component might still be in development. Please use with caution.

Overview

• The Dynamic Progress Bar component shows progress toward completing a task or process.
• It displays a horizontal bar that fills from left to right as progress increases.
• It supports customizable colors, thresholds, and state indicators.
• This component is useful for showing task completion, loading states, or any measurable percentage.

...

• id – Specifies a unique identifier for the component used for programmatic access. For example, "fileUploadProgressBar" enables targeted manipulation of this specific progress bar.
• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "file-upload-progress" allows test scripts to reliably locate this component.
• enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, this progress bar can be highlighted during guided tours of the application.
• guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Progress Indicator", "de-DE": "Fortschrittsanzeige"} provides localized titles for the hotspot.
• guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This bar shows your current progress", "de-DE": "Dieser Balken zeigt Ihren aktuellen Fortschritt"} provides localized descriptions.

Links

• Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/progress-bar

...