HexagonJS
Edit Page
Progress Bar
A progress bar component for indicating progress.
Examples

HTML

<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
Prototypes
hx.ProgressBar
Create one of these for each progress bar in your page. This object provides methods to get and set the value of the progressbar.
Constructors
hx.ProgressBarselectorString / 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
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
A value between 0 and 1
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
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.