Progress Bar (v1)

Progress bar component written in HTL.

Features

• Allows displaying a visual indication of progress.
• Markup inspired from W3, which makes it compatible with older browsers too.

Use Object

The Progress Bar component uses the com.adobe.cq.wcm.core.components.models.ProgressBar Sling model as its Use-object.

Edit Dialog Properties

The following properties are written to JCR for this Progress Bar component and are expected to be available as Resource properties:

1. ./completed - will store the completion percentage
2. ./id - defines the component HTML ID attribute.

BEM Description

BLOCK cmp-progressbar
    ELEMENT cmp-progressbar__label--completed
    ELEMENT cmp-progressbar__label--remaining
    ELEMENT cmp-progressbar__bar

Information

• Vendor: Adobe
• Version: v1
• Compatibility: AEM 6.3
• Status: production-ready
• Documentation: https://www.adobe.com/go/aem_cmp_progressbar_v1
• Component Library: https://www.adobe.com/go/aem_cmp_library_progress