HexagonJS
About
InstallationCore ConceptsChangelog[Migration (1.x -> 2.x)]
Tutorials
Getting StartedPrint Styles
Demos
Component Demo Page
Css Components
BaseButtonBadgeError PagesFormInputsInput GroupLabelLayoutLogoNoticeSpinnerTable
Js Components
Alerts and MessagesAutocomplete PickerAutocompleteButton GroupCardCollapsibleColor PickerCrumbtrailData TableDate PickerDate Time PickerDrag ContainerDrawingDropdownDropdown ButtonExtended TableFile InputFluidForm BuilderInline EditableInline PickerInline SelectMenuMeterModalMore ButtonNotifyNumber PickerPaginatorPickerPivot TablePlotProgress BarSide CollapsibleSidebarSingle SelectSliderStepperSticky Table HeadersTabsTag InputTime PickerTime SliderTitlebarToggle ButtonToggleTooltipTreeVisualization Bar
Utilities
AnimateClick DetectorColor ScaleColorComponentEvent EmitterFast ClickFilterFormatInterpolateListMapMorph SectionMorphsPalettePointer EventsPreferencesRequestResize EventsSearch DomSelectSelectionSetSortTransitionUser Facing TextUtilView
Edit Page
Progress Bar
A progress bar component for indicating progress.
Examples

HTML

<div id="progressBars" class="hx-flag-typography"></div>

JavaScript

hx.select('#progressBars').set([
  hx.div('hx-header-small').text('Standard Progress Bar'),
  hx.progressBar({
    featureFlags: { useUpdatedClass: true },
    title: 'Title here',
    breakdown: 'Breakdown Text can go here',
    plan: 78,
    done: 38,
  }),
  hx.div('spacer-for-docs hx-pad hx-margin'),
  hx.div('hx-header-small').text('Compact Progress Bar'),
  hx.progressBar({
    featureFlags: { useUpdatedClass: true },
    title: 'Freezer (eaches)',
    breakdown: 'Breakdown Text can go here',
    plan: 78,
    done: 38,
    compact: true,
  }),
]);
ProgressBarV1

HTML

<div class="hx-header-medium">ProgressBarV1</div>
<div id="pb1" class="hx-progress-bar"></div>
<div id="pb2" class="hx-progress-bar hx-positive"></div>
<div id="pb3" class="hx-progress-bar hx-warning"></div>
<div id="pb4" class="hx-progress-bar hx-negative"></div>
<div id="pb5" class="hx-progress-bar hx-info"></div>
<div id="pb6" class="hx-progress-bar hx-complement"></div>
<div id="pb7" class="hx-progress-bar hx-contrast"></div>

JavaScript

new hx.ProgressBar('#pb1', {value: 0.25})
new hx.ProgressBar('#pb2', {value: 0.33})
new hx.ProgressBar('#pb3', {value: 0.42})
new hx.ProgressBar('#pb4', {value: 0.5})
new hx.ProgressBar('#pb5', {value: 0.58})
new hx.ProgressBar('#pb6', {value: 0.67})
new hx.ProgressBar('#pb7', {value: 0.75})
Api
Change Log
Prototypes
ProgressBarV1deprecated
Deprecated
Replaced by ProgressBarV2. Pass featureFlags.useUpdatedClass: true in the constructor options to create a new style progress bar.
Create one of these for each progress bar in your page. This object provides methods to get and set the value of the progressbar.
This prototype is not exposed directly. Use hx.ProgressBar
Constructors
ProgressBarV1selectorString / HTMLElementoptionsObject
Creates a progress bar
Arguments
selectorString / HTMLElement
The selector to create the progressbar inside.
options
The options to use when setting up the progressbar.
Properties
animateBoolean
Whether to animate the progress changes for the progressbar by adding the hx-animate class.
Default: false
segmentsArray
The array of segments to initialise the progressbar with.
valueNumber
The value of the progressbar when it is initialised
Default: 0
Methods
segmentssegmentsArrayretainProgressBooleanProgressBar
A method for applying an array of segments to a progress bar.
Arguments
segmentsArray
The array of segments to apply. It should be in the format of an array of objects with a value or ratio property and an optional class property.
Every segment must have either a value or a ratio and every item in the array of segments must have the same property, values and ratios can not be used in conjunction with one another.
If only a class is provided for each segment, the progressbar will use a default ratio of 1:1 for every segment. 
[
  { // Segment would be 25% of the total size of the progress bar and positive
    "class": "hx-positive"
    "value": 0.25
  },
  { // Segment would be 75% of the total size of the progress bar
    "value": 0.75
  }
]
The below segments array would give one negative segment of 60% width, one warning segment of 20% width and one positive segment of 20% width. 
[
  {
    "class": "hx-negative"
    "ratio": 3
  }
  {
    "class": "hx-warning"
  }
  {
    "class": "hx-positive"
    "ratio": 1
  }
]
Passing in undefined as the segments parameter clears the segments and sets the progressbar to a single bar. The retainProgress parameter can be used in conjuntion with this to retain the current progress.
retainProgressBoolean
Whether to retain the current progress of the progressbar.
Default: false
Returns
ProgressBar
This progressbar for chaining.
segmentsArray
A method for getting the segments in a progressbar
Returns
Array
The currently set segments for the progressbar
valuevalueNumberProgressBar
Set the value of the progress bar. Expects a value between 0 and 1.
Arguments
valueNumber
A value between 0 and 1.
Returns
ProgressBar
This progressbar for chaining.
valueNumber
Get the value of the progress bar.
Returns
Number
A value between 0 and 1
ProgressBarV2
This prototype is not exposed directly. Use hx.ProgressBar with the featureFlags.useUpdatedClass: true option.
Constructors
ProgressBarV2selectorString / HTMLElement / SelectionoptionsObject
Arguments
selectorString / HTMLElement / Selection
The selector to create the progress bar inside.
options
Properties
breakdownString
Sets the 'breakdown text' to display below the progress bar. This is intended to explain what the progress bar and its segments are showing.
Default: undefined
compactBoolean
Whether the progress bar should be compact. In this mode, the bar will be shorter and not display numbers on the segments.
Default: false
disabledBoolean
Whether the progress bar is disabled. This can be used when there is no data or when a bar is not applicable.
Default: false
doneNumber
The number of completed items.
This number will be shown next to the plan. It is shown above and to the right of the progress bar like progress / plan (e.g. 100 / 1200) The done amount can be greater than the planned amount (e.g. when you have completed more than you planned to complete)
Default: 0
hidePlanBoolean
Whether to hide the plan and just show the progress bar with title/breakdown text.
Default: false
inProgressNumber
The current number of items that are being actioned but have not been completed.
Default: 0
planNumber
Sets the plan for the progress bar. This is the target number used to indicate the total progress.
It is shown above and to the right of the progress bar like progress / plan (e.g. 100 / 1200
Default: 0
titleString
Sets the title to display above the progress bar
Default: undefined
Methods
breakdownString
Gets the breakdown option
Returns
String
breakdownbreakdownStringProgressBar
Sets the breakdown option
Arguments
breakdownString
Returns
ProgressBar
This ProgressBar
compactBoolean
Gets the compact option
Returns
Boolean
compactcompactBooleanProgressBar
Sets the compact option
Arguments
compactBoolean
Returns
ProgressBar
This ProgressBar
disabledBoolean
Gets the disabled option
Returns
Boolean
disableddisabledBooleanProgressBar
Sets the disabled option
Arguments
disabledBoolean
Returns
ProgressBar
This ProgressBar
doneNumber
Gets the done option
Returns
Number
donedoneNumberProgressBar
Sets the done option
Arguments
doneNumber
Returns
ProgressBar
This ProgressBar
hidePlanBoolean
Gets the hidePlan option
Returns
Boolean
hidePlanhidePlanBooleanProgressBar
Sets the hidePlan option
Arguments
hidePlanBoolean
Returns
ProgressBar
This ProgressBar
inProgressNumber
Gets the inProgress option
Returns
Number
inProgressinProgressNumberProgressBar
Sets the inProgress option
Arguments
inProgressNumber
Returns
ProgressBar
This ProgressBar
planNumber
Gets the plan option
Returns
Number
planplanNumberProgressBar
Sets the plan option
Arguments
planNumber
Returns
ProgressBar
This ProgressBar
titleString
Gets the title option
Returns
String
titletitleStringProgressBar
Sets the title option
Arguments
titleString
Returns
ProgressBar
This ProgressBar
hx.ProgressBar
Creates a Progress Bar element.
Constructors
hx.ProgressBarselectorString / HTMLElement / SelectionoptionsObject
Arguments
selectorString / HTMLElement / Selection
The selection to create the progress bar inside.
options
The options to use when creating the progress bar.
There are two classes used internally, ProgressBarV1 and ProgressBarV2. By default, this will create a ProgressBarV1. If passing featureFlags.useUpdatedClass: true in the options, a ProgressBarV2 will be created.
The other available options differ for each of the two prototypes. See their constructors for details.
Properties
featureFlags
Properties
useUpdatedClassBoolean
Whether to use the ProgressBarV2 prototype instead of ProgressBarV1
Functions
hx.progressBaroptionsObjectSelection
Creates a new ProgressBar set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing ProgressBar.
By default, this will create a ProgressBarV1. If passing featureFlags.useUpdatedClass: true in the options, a ProgressBarV2 will be created.
The other available options differ for each of the two prototypes. See their constructors for details.
Properties
featureFlags
Properties
useUpdatedClassBoolean
Whether to use the ProgressBarV2 prototype instead of ProgressBarV1
Returns
Selection
A selection containing an element with an ProgressBar initialised on it
Classes
hx-progress-bar
The class given to the root element of a progress bar
Extra Classes
hx-action
Styles the progress bar with action colors
hx-animate
A class that changes the progressbar to use CSS animations when changing the progress to give smooth motion.
hx-complement
Styles the progress bar with complement colors
hx-contrast
Styles the progress bar with a dark color on a light theme, and a light color on a dark theme.
hx-info
Styles the progress bar to indicate that clicking it will lead to some form of documentation / information.
hx-negative
Adds progress bar styling indicative of failure, danger or something negative.
hx-positive
Adds progress bar styling indicative of success, confirmation or something positive.
hx-warning
Adds progress bar styling indicative of warning.