feedback
Progress
A bar that shows how far a task or a series has come.
CSS onlyPlain classes; no JavaScript in any stack.
Usage
A native <progress> with value and max, and a label that also says the numbers.
<div class="ca-field w-full max-w-sm">
<label class="ca-field__label" for="lessons-done">Lessons done: 14 of 20</label>
<progress class="ca-progress" id="lessons-done" value="14" max="20">14 of 20</progress>
</div>Examples
With a hint
Point aria-describedby at a hint for details such as the size of an upload.
62% of 4.8 MB
<div class="ca-field w-full max-w-sm">
<label class="ca-field__label" for="upload">Uploading theory-notes.pdf</label>
<progress class="ca-progress" id="upload" value="62" max="100" aria-describedby="upload-hint">62%</progress>
<p class="ca-field__hint" id="upload-hint">62% of 4.8 MB</p>
</div>Guidance and accessibility
When to use
- Use a progress bar for a task with a known end: an upload, a series of lessons, the steps of a long form.
- Write the numbers in the label too, such as “14 of 20”, so people do not have to estimate the bar.
- Always set
value. Without it the bar has no value to draw.
Accessibility
- It is a native
<progress>: screen readers announce its value. Connect a<label>withforandid. - The text inside the element is a fallback for very old browsers.
- In forced colors the skin’s drawing gives way to the native bar.
Classes
Generated from the component contract. Parts use __, modifiers use --.
| Class | Kind | Use it for |
|---|---|---|
ca-progress | Component | A native <progress>; the skin draws the track and the value. |
Skins
The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.
Base skin
Neutral grayscale starting point; product skins extend it and change what differs.
Calaca skin
The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.
Proof skin
Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.
Crossview skin
The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.
Framework notes
Link the prebuilt stylesheet of your skin next to your brand theme. No build step.
<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.
@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";Same stylesheet as above; write the classes in className.
<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>