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>