Progress
Progress bar or ring, indeterminate or filling to a value, with an optional label and count.
c2-progress is a bar that fills as work completes. Without a value its indicator sweeps the track indefinitely; give it a value (out of max, 100 by default) and it fills from the start edge and animates between values. Text in the default slot labels the bar and doubles as its accessible name, show-value prints the percentage on the opposite side, and the value slot replaces that text when you are counting steps or megabytes instead. It is a progressbar for assistive technology, with aria-valuenow when determinate. Track and indicator are two plain boxes, so height, radius, colours and speed are all variables. Set variant="circular" to draw it as a ring instead, with the value in the middle and the label underneath.
Import
import '@c2n/components/progress'Usage
Use an indeterminate bar when you cannot tell how far along the work is, and a value when you can: set it as progress comes in and the indicator animates to the new position. value is clamped to 0–max, and clearing it returns the bar to the indeterminate sweep.
Always give a bar a name. Slotted text is announced and also shown above the track; label names a bare bar without showing anything. The percentage next to the label is presentational — screen readers read aria-valuenow, so the value slot is free to say “3 of 5” or “1.2 / 4 MB” without repeating the number.
Reach for c2-spinner instead when the wait has no natural width to fill — a button, a toolbar, a small card — and for c2-button’s own running state inside an action.
The label row only appears when there is a label or a value to show, so a bare <c2-progress> is exactly --c2-progress--height tall. --c2-progress__indicator--background-color is the fill and --c2-progress__track--background-color the groove behind it, --c2-progress--border-radius rounds both (set 0 for a square meter), and --c2-progress--animation-duration sets the indeterminate cycle as well as half the determinate fill transition.
Circular
variant="circular" draws the same track and indicator as a ring that starts at the top and fills clockwise. --c2-progress--size is its diameter and --c2-progress--height the thickness of the stroke. show-value prints the percentage in the middle (sized by --c2-progress__ring-value--font-size, with the % sign as the unit part), the value slot replaces it as on the bar, and the label moves underneath the ring. Without a value the arc spins. --c2-progress__indicator--stroke-linecap chooses between rounded (round, the default) and square (butt) arc ends.