Progress
A determinate or indeterminate progress bar.
Try it
Upload progress
Determinate file upload.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_progress.html" with label=label value=value show_value=show_value %}context = {'label': 'Uploading annual report', 'value': 68, 'show_value': True}Guide
Add it to your project
- Always provide a descriptive `label`.
- Supply a numeric `value` for determinate progress; omit it for indeterminate work.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| label | string | Not set | Yes | Accessible name for what is progressing. Constraint: Use concise visible text that identifies the control or measurement. |
| value | number | Not set | No | Determinate value from 0 to 100. Constraint: Must be numeric; template clamps through numeric attribute handling. |
| show_value | boolean | False | No | Shows determinate percentage. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Uses `role=progressbar`, a name, min/max and determinate `aria-valuenow`; percentage is optional visible text.
- Responsive
- Fills its container at every width.
- Without JavaScript
- Indeterminate state retains a static partial fill under reduced motion.
Need help?
Troubleshooting
Contract check: States: determinate (a numeric aria-valuenow, fill width driven by
Provide a numeric value for determinate progress and retain its visible label; the component does not turn arbitrary text into a progress value.
Explore next