Progress Bar

A component that displays an indicator showing the completion progress of a task. Implements the ARIA progressbar pattern to ensure proper accessibility support.

Provides context for assistive technology to read the progress of a task

Example

Architecture

sc-progress-bar-root
Slot: default
sc-progress-bar-indicator

Reference

  • Root

    The root container that manages the progress bar's state and behavior. Coordinates the interaction between the indicator and accessibility attributes.

    • Attributes

      • aria-label
        string
        /
        default: -

        Defines an accessible label for the progress bar when a visible label is not present.

      • aria-valuetext
        string
        /
        default: -

        Provides a human-readable text alternative that describes the progress value. Useful for conveying more specific progress information to screen readers.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying container for DOM manipulation.

      • max-value
        number
        /
        default: -

        The maximum value that represents 100% progress. Used to calculate the relative progress percentage.

      • value
        number
        /
        default: -

        The current progress value. Must be less than or equal to max-value.

  • Indicator

    The visual element that represents the current progress. Automatically sizes itself based on the current value relative to the maximum value while maintaining proper ARIA attributes for accessibility.

    • Attributes

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying element for DOM manipulation.

made for toddle