Skip to content

ProgressBar

Table of contents
Table of contents

Use ProgressBar to visualize task completion.

Examples

Default

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

Small

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

Large

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

Multiple items

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

Arguments

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

Slots

Items

Use the Item slot to add an item to the progress bas

NameTypeDefaultDescription
percentageIntegerN/AThe percent complete
bgSymbolN/AThe background color
kwargsHashN/AThe same arguments as System arguments.