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:
showPercentshows a percentage of progress instead of actual valueslabelsis shown by default, but can be disabledtooltipis 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>
Removing tooltip
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 | boolean | false | |
no-tooltip | 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>