You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Status and Feedback
Progress Bar
Status and Feedback
Progress Bar
A Progress Bar is used to visually represent the completion of a task or operation. It shows how much of the task has been completed and how much is still left.
Basic Progress Bar
The most basic implementation of a progress bar is cyan. We use cyan progress bars for neutral actions such as save states or system progress.
<div>
<ProgressBarprogress={33}/><br/>
<ProgressBarprogress={66}/><br/>
<ProgressBarprogress={100}/>
</div>
Colors
We can add colored variants to draw attention to particular statuses or for use in visualizations.
<div>
<ProgressBarprogress={20}red/><br/>
<ProgressBarprogress={40}yellow/><br/>
<ProgressBarprogress={60}/><br/>
<ProgressBarprogress={80}blue/><br/>
<ProgressBarprogress={90}blueGrey/><br/>
<ProgressBarprogress={100}green/>
</div>
Small
A small progress bar can be used in information-dense screens to save screen real estate.
<div>
<ProgressBarprogress={20}smallred/><br/>
<ProgressBarprogress={40}smallyellow/><br/>
<ProgressBarprogress={60}small/><br/>
<ProgressBarprogress={80}smallblue/><br/>
<ProgressBarprogress={100}smallgreen/>
</div>
Indeterminate
Animating progress bars can effectively show system process as an indeterminate loading state. Used to show loading states between 1-10 seconds.