Progress Simple

Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.

See this kit in action in our sample UI

Default

Code Example

<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

Setting Values

Code Example

<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

<br>

<%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>

Progress Bar Width

Code Example

<%= pb_rails("progress_simple", props: { percent: 40, width: "100px" }) %>

Variants

Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default, positive, negative, and warning, respectively.

Code Example

<%= pb_rails("progress_simple", props: { percent: 64.9, variant: "default" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 90, variant: "positive" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 40, variant: "warning" }) %>

Muted

Code Example

<%= pb_rails("progress_simple", props: { percent: 64.9, muted: true }) %>

Align

Code Example

<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "center" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "right" }) %>

Things to Avoid

Do not use as turbolinks bar.

UI Samples using Progress Simple Kit

Get the full picture. See how this kit is used in our samples.

Music App

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
align
value
max
muted
percent
width
variant