Getting Started
Components
Search for a command to run...
Progress bars provide visual feedback about the status of ongoing operations, helping users understand how much work has been completed and how much remains. They can be determinate (showing a specific percentage) or indeterminate (showing ongoing activity without a specific completion point). Progress bars reduce uncertainty during loading states and give users confidence that the system is working, especially during longer operations that might otherwise feel unresponsive.
Use progress bars for operations that take more than a few seconds to complete, such as file uploads, data processing, or multi-step forms. For very quick operations, progress bars may flash too briefly to be useful and could create unnecessary visual noise. Pair progress bars with clear labels or percentage indicators when appropriate to give users precise information about completion status.
import { Progress } from "@strongtie/design-system/progress"All components accept standard HTML attributes and React props.
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
progressEnsure proper accessibility attributes are added when implementing this component.