Version: 5.0.3

Progress

The Progress component, also known as a progress bar, is used to visualize a value, compared to it's minimum and maximum. There are several variations of progress elements: the default progress bar, the circular progress, and the gauge. TritonProgress examples of use include: displaying fuel left in a tank, showing how many tasks are completed, and showing context for a KPI.

Basic Usage

<triton-progress 
  max="20" value="5"
></triton-progress>

<TritonBadge 
  max="20" value="5" 
/>

<html> 
  <head> 
    <script type="module"> 
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js'; 
      defineCustomElements(); 
    </script> 
  </head> 
  <body> 
    <triton-progress 
      max="20" value="5"
    ></triton-progress>
  </body> 
</html>

Variants

Progress Bar

The default variant is the Progress Bar. Progress will display a line based on the percentage of the value min -> max. By default, a tooltip will be added to the top of the bar with the value. This is shown in the basic example above.

Circular Progress Indicator

The circular progress indicator displays a progress circle from min to max, where starting point is on the bottom of the circle. Set the property shape to "circle" to enable circular progress.

<triton-progress max="20" value="10" shape="circle"></triton-progress>

Dashboard Progress Indicator

The dashboard progress indicator displays a progress gauge in an arch. Set the shape property to "dashboard" to enable the Dashboard mode. Text can also be used inside the dashboard progress element.

<triton-progress max="20" value="10" shape="dashboard"></triton-progress>

Appearance

There are several properties for customizing the appearance of the Triton Progress:

showPercent shows a percentage of progress instead of actual values
labels is shown by default, but can be disabled
tooltip is shown by default, but can be disabled as well

Percentage

<triton-progress max="20" value="16" showPercent></triton-progress>
<triton-progress shape="circle" max="20" value="12" showPercent></triton-progress>
<triton-progress shape="dashboard" max="20" value="12" showPercent></triton-progress>

Removing Labels

The labels can be removed by setting the labels property to false.

<triton-progress max="20" value="9" labels="false"></triton-progress>
<triton-progress shape="circle" max="20" value="9" labels="false"></triton-progress>
<triton-progress shape="dashboard" max="20" value="9" labels="false"></triton-progress>

The tooltip can be removed by setting the tooltip property to false.

<triton-progress max="20" value="9" tooltip="false"></triton-progress>
<triton-progress shape="circle" max="20" value="9" tooltip="false"></triton-progress>
<triton-progress shape="dashboard" max="20" value="9" tooltip="false"></triton-progress>

Playground

API

Properties

Property	Description	Type	Default
`color`	Set color of the bar, require valid css color. If empty, theme default will be used	`string`	-
`disabled`	If true, the component will look disabled and not be interactable	`boolean`	`false`
`glow`	Glow effect on progress bar	`boolean`	`false`
`labels`	If true, it will show minmax labels on both sides of the progress element	`boolean`	`true`
`max`	Max value for the progress bar	`number`	`100`
`min`	Minimum value for the progress bar	`number`	`0`
~~`no-labels`~~	~~If true, will show minmax labels on either side of the bar~~ Deprecation	`boolean`	`false`
~~`no-tooltip`~~	~~If true, will show value tool tip~~ Deprecation	`boolean`	`false`
`shape`	Select the type of the progress bar	`circle` `dashboard` `line`	`TritonProgressShape.Line`
`show-percent`	If true, will show progress as percentage	`boolean`	`false`
`size`	Set the size of the component	`base` `body` `large` `medium` `small` `tiny` `xlarge` `xxlarge` `xxxlarge`	`'body'`
`tooltip`	If true, it will show a tooltip with the current value	`boolean`	`true`
`value`	Value of the progress in the bar	`number`	`0`

Slots

Main

Takes any kind of markup element.

<triton-progress>
  <div></div>
</triton-progress>

Progress

Basic Usage​

Variants​

Progress Bar​

Circular Progress Indicator​

Dashboard Progress Indicator​

Appearance​

Percentage​

Removing Labels​

Removing tooltip​

Playground​

API​

Properties​

Slots​

Main​