Noora (0.11.0)

Progress Bar

Basic progress bar configurations Open in playground
Storage Used: 150 200 
<.progress_bar max={100} value={75}/>
<.progress_bar max={200} value={150} title="Storage Used:"/>
Different progress completion levels Open in playground
Not started 0 100
25% Complete 25 100
Halfway there 50 100
Almost done 75 100
Complete! 100 100 
<.progress_bar max={100} value={0} title="Not started"/>
<.progress_bar max={100} value={25} title="25% Complete"/>
<.progress_bar max={100} value={50} title="Halfway there"/>
<.progress_bar max={100} value={75} title="Almost done"/>
<.progress_bar max={100} value={100} title="Complete!"/>
Progress bars with different maximum values Open in playground
Steps completed: 3 5
Points earned: 750 1000
Download progress (MB): 847 1024 
<.progress_bar max={5} value={3} title="Steps completed:"/>
<.progress_bar max={1000} value={750} title="Points earned:"/>
<.progress_bar max={1024} value={847} title="Download progress (MB):"/>
Edge cases and special scenarios Open in playground
Exceeded goal: 120 100
Just started: 1 1000
Very Long Progress Bar Title That Might Wrap: 42 100 
<.progress_bar max={100} value={120} title="Exceeded goal:"/>
<.progress_bar max={1000} value={1} title="Just started:"/>
<.progress_bar max={100} value={42} title="Very Long Progress Bar Title That Might Wrap:"/>