Skip to content

ProgressBar

Use ProgressBar to visualize task completion.

Examples

Default

<%= render(Primer::ProgressBarComponent.new) do |component| %>
<% component.slot(:item, percentage: 25) %>
<% end %>

Small

<%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
<% component.slot(:item, bg: :blue_4, percentage: 50) %>
<% end %>

Large

<%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
<% component.slot(:item, bg: :red_4, percentage: 75) %>
<% end %>

Multiple items

<%= render(Primer::ProgressBarComponent.new) do |component| %>
<% component.slot(:item, percentage: 10) %>
<% component.slot(:item, bg: :blue_4, percentage: 20) %>
<% component.slot(:item, bg: :red_4, percentage: 30) %>
<% end %>

Arguments

NameTypeDefaultDescription
sizeSymbol:defaultOne of :default, :small, or :large. Increases height.
system_argumentsHashN/ASystem arguments

item slot

NameTypeDefaultDescription
percentageInteger0Percentage completion of item.
bgSymbol:greenColor of item.
system_argumentsHashN/ASystem arguments