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.
Reference
Section titled “Reference”| Attribute | Default | Purpose |
|---|---|---|
value |
0 |
Progress value, relative to max. |
max |
100 |
Value that fills the orbit’s range. |
shape |
none |
Ending shape. See Changing endings. |
variant |
— | stroke draws open arcs instead of filled bands. See Stroke variant. |
interactive |
— | Lets the SVG receive pointer events. See Pointer interaction. |
| CSS property | Default | Purpose |
|---|---|---|
--o-progress |
— | Progress value set from CSS. Overrides value when present. |
--o-fill |
var(--o-gray-light) |
Progress bar fill. Not used by variant="stroke". |
--o-stroke |
var(--o-fill) |
Progress bar border, or the line color with variant="stroke". |
--o-stroke-width |
1 |
Progress bar border width. |
--o-back-fill |
transparent |
Background bar fill. Not used by variant="stroke". |
--o-back-stroke |
none |
Background bar border, or the track color with variant="stroke". |
--o-back-stroke-width |
1 |
Background bar border width. |
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 an o-progress 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.
Setting the value from CSS
Section titled “Setting the value from CSS”--o-progress sets the value from CSS and overrides the value attribute. Use it when a stylesheet, a class or a parent element owns the state:
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Orbit redraws when the element’s or an ancestor’s class or style changes. After changes it cannot observe, such as editing a stylesheet rule, call Orbit.refresh(). The value is not animated: a CSS transition on --o-progress jumps straight to the new value.
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 and zigzag shapes. Default none.
Examples include the current Orbit stylesheet and runtime. Get both files for your project.
Stroke variant
Section titled “Stroke variant”By default the progress bar is a filled band. For a thin gauge line, add variant="stroke": both bars become open arcs along the middle of the orbit, with round caps.
--o-strokecolors the progress line and--o-back-strokethe track.--o-filland--o-back-fillare not used.--o-stroke-widthdefaults to2and--o-back-stroke-widthto1, in screen pixels at any size.- The track defaults to
var(--o-gray-light). shapedoes not apply to this variant.valueequal tomaxon a 360° range draws a closed circle.
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.