Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
<%= pb_rails("progress_simple", props: { percent: 64.9 }) %> <br> <%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>
Progress Simple can pass colors - primary, green, red, and yellow. Variants names are default
, positive
, negative
, and warning
, respectively.
<%= 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" }) %>
<%= 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" }) %>
Do not use as turbolinks bar.