Use ProgressBar
to visualize task completion.
Name | Type | Default | Description |
---|---|---|---|
size | Symbol | :default | One of :default , :large , or :small . Increases height. |
system_arguments | Hash | N/A | System arguments |
items
Use the Item slot to add an item to the progress bar
Name | Type | Default | Description |
---|---|---|---|
percentage | Integer | N/A | The percent complete |
bg | Symbol | N/A | The background color |
kwargs | Hash | N/A | The same arguments as System arguments. |
<%= render(Primer::Beta::ProgressBar.new) do |component| %><% component.with_item(percentage: 25) %><% end %>
<%= render(Primer::Beta::ProgressBar.new(size: :small)) do |component| %><% component.with_item(bg: :accent_emphasis, percentage: 50) %><% end %>
<%= render(Primer::Beta::ProgressBar.new(size: :large)) do |component| %><% component.with_item(bg: :danger_emphasis, percentage: 75) %><% end %>
<%= render(Primer::Beta::ProgressBar.new) do |component| %><% component.with_item(percentage: 10) %><% component.with_item(bg: :accent_emphasis, percentage: 20) %><% component.with_item(bg: :danger_emphasis, percentage: 30) %><% end %>