10.12.0

Progress Simple

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

Default


Setting Values



Progress Bar Width


Variants





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

Muted


Align





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.

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
  • id
  • data
  • aria
  • children
  • align
  • value
  • max
  • muted
  • percent
  • width
  • variant