| Do | Use a determinate bar when the total amount of work is known, and indeterminate when it's not. |
| Do | Choose a color variant that matches the context: accent for general progress, success for completion, warning or error for alerts. |
| Do | Always provide a label, even if hidden; screen readers need it to announce what's loading. |
| Don't | Place icons or labels inside the bar; compose them alongside it using layout components. |
| Don't | Use a progress bar for instant actions; it's meant for operations that take noticeable time. |
| Don't | Use multiple progress bars stacked together for the same operation; use one bar with a value label instead. |