C&C Docs
Log in

cnc-progress-bar

A determinate progress bar. Its label comes from the default slot and moves depending on the size: inside the bar at lg, xl and 2xl, underneath it at the three smaller sizes.

Quick start

Bind a number 0–100 to progress and put the label in the default slot. The bar is purely a display — it has no events and no internal state.

40% 
<div x-data="{ pct: 40 }">
  <cnc-progress-bar size="lg" $progress="pct">
    <span x-text="pct + '%'"></span>
  </cnc-progress-bar>
</div>

Usage guidance

Use this only when you can say how far along you ARE. A bar that sits at an invented percentage is worse than no bar; for work of unknown length use cnc-processing for a blocking wait or cnc-skeleton for content still loading in place.

Keep the label meaningful at the small sizes. Below lg it renders under the bar as ordinary text, which is room enough for "3 of 8 files" rather than just a repeat of the percentage the bar already shows.

The bar takes its width from its container and its colour from the stylesheet's primary. Wrap it to size it; there is no width or colour property.

← Back to Widgets