Progress Bar

Displays progress with a value

Default

Cloning product: 70% progress

Default with Percentage

Cloning product: 70% progress

70%

Default with Disabled Tooltip

Cloning product: 17% progress

Tooltip Position - Bottom

Cloning product: 32% progress

Custom color

Reached limit: 86% progress

Sage Component

SageProgressBar

<h2 class="t-sage-heading-6">Default</h2>
<%= sage_component SageProgressBar, {
  percent: 70,
  label: "Cloning product"
} %>

<h2 class="t-sage-heading-6">Default with Percentage</h2>
<%= sage_component SageProgressBar, {
  display_percent: true,
  percent: 70,
  label: "Cloning product"
} %>

<h2 class="t-sage-heading-6">Default with Disabled Tooltip</h2>
<%= sage_component SageProgressBar, {
  color: SageTokens::COLOR_PALETTE[:ORANGE_300],
  disable_tooltip: true,
  percent: 17,
  label: "Cloning product"
} %>

<h2 class="t-sage-heading-6">Tooltip Position - Bottom</h2>
<%= sage_component SageProgressBar, {
  color: SageTokens::COLOR_PALETTE[:YELLOW_300],
  percent: 32,
  label: "Cloning product",
  tooltip_position: "bottom",
} %>

<h2 class="t-sage-heading-6">Custom color</h2>
<%= sage_component SageProgressBar, {
  background_color: SageTokens::COLOR_PALETTE[:PRIMARY_100],
  color: "#4edbe6",
  percent: 86,
  label: "Reached limit"
} %>

Property	Description	Type	Default
`color`	Optional hex or `SageTokens::COLOR_PALETTE` value for the progress bar color.	String	`nil`
`disable_tooltip`	Option to disable the default tooltip.	Boolean	`nil`
`display_percent`	If true, displays the percentage to the right of the progress bar.	Boolean	`nil`
`animate`	If true, animates the progress bar.	Boolean	`nil`
`label` required	Sets `aria-valuetext` and content text for `<progress>` element.	String	`nil`
`percent` required	Sets `value`, `aria-valuenow` and inline `width` style of progress bar.	Integer	`nil`
`tooltip_position`	Sets the tooltip position to either above or below the progress bar.	String: ["top", "bottom"]	`nil`