o-progress Custom Element
<o-progress> is a standard web-component for rendering a radial progress bar. It has two elements: a progress bar and a background bar that shows the max range progress bar can achieve.
Look and feel
Changing progress colors
To change o-progress progress bar color use CSS custom var --o-fill for background, --o-stroke for border, and --o-stroke-width for border-width in a o-arc style. Use --o-back-fill to set a background bar color, --o-back-stroke for border-color, and --o-back-stroke-width for border-width.
Changing progress attributes
o-progress has special attributes:
value: To set a number that represents the progress bar value. Default 0max: To set the max allowedvalue. Default 100
Changing endings
o-progress has one special attribute: shape to define different endings. Currently, you can choose between circle, arrow, bullet, shapes. Default none.
Adjust o-progress size
Each o-progress has one orbit space size, but it can be finely adjusted using the CSS class utility .shrink-10 to .shrink-90, allowing the vectors to shrink by a specified percentage.
On opposite way, the CSS class utility .grow-0x to .grow-12x, allowing vector to expand by a multiple of .orbit size. It is possible to use decimal fractions. For example, .grow-0.1x, .grow-10.7x, etc.
Adjusting radial layout
Arbitrary o-progress angle.
.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Relative o-progress orbital position
By default, o-progress is positioned in the middle of orbit path. To change that, there some CSS utilities:
.inner-orbit: To place ano-progress just below its orbit.
.outer-orbit: To place o-progress just above its orbit.
.quarter-inner-orbit: To place o-progress a 25% into its orbit.
.quarter-outer-orbit: To place o-progress a 25% outer its orbit.