Progress Bar Component
The Core Component Progress Bar Component visually represents progress towards a goal.
TIPUsage
The Progress Bar Component allows the content author to easily create a progress bar by defining a percentage of completion, allowing for intuitive visual display of progress towards a goal.
Version and Compatibility
The current version of the Progress Bar Component is v1, which was introduced with release 2.9.0 of the Core Components in May 2020, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
| Component Version | AEM 6.4 | AEM 6.5 | AEM 6.5 LTS | AEM as a Cloud Service |
|---|---|---|---|---|
| v1 | Compatible with release 2.17.4 and prior | Compatible | Compatible | Compatible |
Sample Component Output
To experience the Progress Bar Component as well as see examples of its configuration options as well as HTML and JSON output, visit the Component Library.
Technical Details
The latest technical documentation about the Progress Bar Component can be found on GitHub.
Further details about developing Core Components can be found in the Core Components developer documentation.
Configure Dialog
-
Completion - The progress as represented by a percentage
-
ID - This option allows to control the unique identifier of the component in the HTML and in the Data Layer.
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.
Design Dialog
The design dialog allows the template author to define the styles applied to the Progress Bar Component.
Styles Tab
The Progress Bar Component supports the AEM Style System.
Adobe Client Data Layer
The Progress Bar Component supports the Adobe Client Data Layer.
