Progress Bar CSS API Reference

All Common CSS variables:

    Specific CSS variables for Progress Bar styling:

    • --smart-progress-bar-default-width: ProgressBar's default width.
    • --smart-progress-bar-default-height: ProgressBar's default height.
    • --smart-circular-progress-bar-default-size: CircularProgressBar default size (width = height).
    • --smart-circular-progress-bar-fill-size: CircularProgressBar fill size. The width of the fill. The middle container's width is calculated defaultd on this value.

    The following CSS selectors can be used to style Progress Bar:

    • smart-progress-bar - the element itself. Can be used to set width and height for the whole element.
      • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
        • .smart-value - the progress fill.
        • .smart-label - a numeric indicator for the fill.

    Demo

    <style>
            #progressbar{
                --smart-progress-bar-default-width: 200px;
                --smart-progress-bar-border-top-right-radius: 10px;
                --smart-progress-bar-border-top-left-radius: 10px;
                --smart-progress-bar-border-bottom-left-radius: 10px;
                --smart-progress-bar-border-bottom-right-radius: 10px;
            }
    </style>