ProgressMetric – Customer Portal

The ProgressMetric component is a helper for rendering various types of progress bars. It is used in other components, such as RankProgress, but is also available for standalone use in page code.

Configuration Examples:

<ui-progress-metric
  class="pa-4"
  type="grid"
  :value="778"
  :max="1000"
  title="Downline"
></ui-progress-metric>

<ui-progress-metric
  class="pa-4"
  type="grid"
  :value="12300"
  :max="15000"
  :label-is-percent="true"
  title="CommissionBase"
></ui-progress-metric>

<ui-progress-metric
  class="pa-4"
  type="percent"
  :value="77"
  :max="100"
  color="light-blue"
  bg-color="grey"
  :size="30"
  title-class="ml-6 text-white"
  label-class="mr-6 text-black"
  title="Frontline"
  :rounded="true"
  :striped="true"
></ui-progress-metric>

<ui-progress-metric
  class="pa-4"
  type="percent"
  :value="100"
  :max="100"
  color="light-blue"
  bg-color="grey"
  :size="30"
  title-class="ml-6 text-white"
  label-class="mr-6 text-black"
  title="Frontline"
  :rounded="false"
  :striped="true"
></ui-progress-metric>

<ui-progress-metric
  class="pa-4"
  type="percent"
  :value="62"
  :max="100"
  color="amber"
  bg-color="grey"
  :size="60"
  label-class="mr-6 text-black"
  :rounded="true"
  :striped="true"
  :only-centered-label="true"
></ui-progress-metric>

<ui-progress-metric
  class="pa-4"
  type="stackable"
  :size="100"
  :rounded="true"
  bg-color="rgba(0,0,0,0.1)"
  :stacked-values="[
    {
      percent: 11,
      bgColor: 'red',
    },
    {
      percent: 22,
      bgColor: 'blue',
      showLabel: true,
      labelClass: 'text-white text-h2',
    },
    {
      percent: 33,
      bgColor: 'green',
      striped: true,
    }]"
></ui-progress-metric>

<ui-progress-metric
  class="pa-4"
  type="stackable"
  :size="100"
  :rounded="true"
  bg-color="rgba(0,0,0,0.1)"
  :stacked-values="[
    {
      percent: 33.33,
      bgColor: 'red',
      showLabel: true,
      rounded: true,
      striped: true,
      labelClass: 'text-white text-h2',
      label: 'Benim',
    },
    {
      percent: 33.33,
      bgColor: 'purple',
      showLabel: true,
      rounded: true,
      striped: true,
      labelClass: 'text-white text-h2',
      label: 'Guzel',
    },
    {
      percent: 33.33,
      bgColor: 'blue',
      showLabel: true,
      rounded: true,
      striped: true,
      labelClass: 'text-white text-h2',
      label: 'Mutfak!',
    }]"
></ui-progress-metric>

Property	Default	Type	Description
type	'grid'	String	Type of progress bar: `'grid'`, `'percent'`, or `'stackable'`.
value	—	Number	Current progress value.
max	—	Number	Maximum progress value.
label-is-percent	`false`	Boolean	If `true`, the label is displayed as a percentage.
color	—	String	Color of the progress bar.
bg-color	—	String	Background color of the progress bar.
size	—	Number	Size of the progress bar in pixels.
title-class	—	String	CSS class for the title.
label-class	—	String	CSS class for the label.
title	—	String	Title of the progress bar.
rounded	`false`	Boolean	If `true`, the progress bar has rounded corners.
striped	`false`	Boolean	If `true`, the progress bar has stripes.
only-centered-label	`false`	Boolean	If `true`, the label is centered.
stacked-values	—	Array	Array of objects for stackable progress bars, each with `percent`, `bgColor`, `showLabel`, `labelClass`, `rounded`, `striped`, and `label`.

Related to

Related articles