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

Architecture

so-progress-bar

Reference

  • Progress Bar

    The component 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.

      • 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.

made for toddle