o-progress web component
<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
Section titled “Look and feel”Changing progress colors
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Changing progress attributes
Section titled “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
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Changing endings
Section titled “Changing endings”o-progress has one special attribute: shape to define different endings. You can choose between circle (or circle-a), circle-b, arrow, bullet, rounded, slash, backslash, zizag shapes. Default none.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjust o-progress size
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Adjusting radial layout
Section titled “Adjusting radial layout”Arbitrary o-progress angle.
Section titled “Arbitrary o-progress angle.”.angle-*: Set starting point angle from 0 to 360 degrees, overrriding automatic radial arragement.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Relative o-progress orbital position
Section titled “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.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Pointer interaction
Section titled “Pointer interaction”<o-progress> is decorative by default so it does not intercept nearby controls. Add interactive to enable pointer events on its painted SVG:
<o-progress interactive value="72"></o-progress>Use an accessible button or provide keyboard behavior and an accessible name when the element acts as a control.