Meters & Progress

Meters

Use the <meter> element to represent either a scalar value within a known range or a fractional value.

<meter min="0" max="100" low="25" high="75" optimum="100" value="10"></meter>
<meter min="0" max="100" low="25" high="75" optimum="100" value="50"></meter>
<meter min="0" max="100" low="25" high="75" optimum="100" value="80"></meter>

	Property Name (global/local)	Description
	--hiq-meter-background-color --meter-background-color	Sets the background color of the meter element track.
	--hiq-meter-strong-color --meter-strong-color	Sets the background color of the meter bar with an optimum value.
	--hiq-meter-good-color --meter-good-color	Sets the background color of the meter bar with a sub-optimum value.
	--hiq-meter-weak-color --meter-weak-color	Sets the background color of the meter bar with a weak value.

Progress Bars

Use the <progress> element to represent the completion progress of a task as a progress bar.

progress

<progress value="50" max="100">progress</progress>

If a progress bar has no value defined on it, it will display an indeterminate loading animation.

indeterminate progress

<progress>indeterminate progress</progress>

Property Name (global/local)	Description
--hiq-progress-height --progress-height	Sets the height of the progress element.
--hiq-progress-background-color --progress-background-color	Sets the background color of the progress element track.
--hiq-progress-filled-color --progress-filled-color	Sets the background color of the filled portion of the progress element.