Progress

As the files names suggests, this feature shares common styles and methods with the slider feature, you will find many similar elements between both.

The template provides a complete set of styles to build progress, either available as raw code and through a powerful API:

Markup

If you want to use the progress style without using the API, here is an example of complete progress markup:

0% 25% 50% 75% 100% Nope Go on Better Almost Yeah! 35% 35%

For RTL version, use right position instead of left.

<span class="progress" style="width: 100%">

	<!-- Inner marks -->
	<span class="inner-mark" style="left: 25%"></span>
	<span class="inner-mark" style="left: 50%"></span>
	<span class="inner-mark" style="left: 75%"></span>

	<!-- Top marks -->
	<span class="top-mark" style="left: 1px"><span class="mark-label align-right">0%</span></span>
	<span class="top-mark" style="left: 25%"><span class="mark-label">25%</span></span>
	<span class="top-mark" style="left: 50%"><span class="mark-label">50%</span></span>
	<span class="top-mark" style="left: 75%"><span class="mark-label">75%</span></span>
	<span class="top-mark" style="left: 100%"><span class="mark-label align-left">100%</span></span>

	<!-- Bottom marks -->
	<span class="bottom-mark" style="left: 1px"><span class="mark-label align-right">Nope</span></span>
	<span class="bottom-mark" style="left: 25%"><span class="mark-label">Go on</span></span>
	<span class="bottom-mark" style="left: 50%"><span class="mark-label">Better</span></span>
	<span class="bottom-mark" style="left: 75%"><span class="mark-label">Almost</span></span>
	<span class="bottom-mark" style="left: 100%"><span class="mark-label align-left">Yeah!</span></span>

	<!-- Background-text, revealed when progress bar is too small -->
	<span class="progress-text">35%</span>

	<!-- Progress bar with foreground text -->
	<span class="progress-bar" style="width: 35%">
		<span class="progress-text">35%</span>
	</span>
</span>

For a vertical slider, add the class vertical to the main element and use left-mark and right-mark instead of top-mark and bottom-mark (with align-top and align-bottom for extremes).

Of course, all marks are optional an can be removed at will:

35% 35%

There is a thin and a large style, and the bar can use any color:

35% 35%

<!-- Thin style -->
<span class="progress thin" style="width: 100%">

	<!-- Progress bar with foreground text -->
	<span class="progress-bar red-gradient" style="width: 35%"></span>
</span>

<!-- Large style -->
<span class="progress large" style="width: 100%">

	<!-- Background-text, revealed when progress bar is too small -->
	<span class="progress-text">35%</span>

	<!-- Progress bar with foreground text -->
	<span class="progress-bar anthracite-gradient glossy" style="width: 35%">
		<span class="progress-text">35%</span>
	</span>
</span>

API

To create a progress using the API, use this method:

// Explicit value parameter
$(selector).progress(50, {
	// Options
});

// Value as option
$(selector).progress({
	value: 50
});

You may also write the value inside the target element:

<span id="#progress">50</span>

And just call the method without any value:

$(selector).progress();

Use the many available options below to customize the look.

Methods

$(selector).progress(val, options)

Create a progress bar in the target element
Options may be set using the inline html5 data-progress-options attribute:
<div data-progress-options="{'max':200}"></div>

Parameters

@param int val the progress value (can be ommitted and defined in options or available as text inside the target)
@param object options

$(selector).setProgressValue(value, showValue)

Set progress current value

Parameters

@param number value the value, may contain an unit
@param boolean|null showValue true to show text, false to hide, or leave empty to use original settings value (optional)

$(selector).showProgressStripes(options)

Show stripes on progress bar

Parameters

@param object options any option to override the inital settings (see progress() defaults for more details) (optional)

$(selector).hideProgressStripes()

Hide stripes on progress bar

$(selector).changeProgressBarColor(color, glossy)

Change progress bar color (only works with gradients)

Parameters

@param string color the new gradient color class
@param boolean glossy true of false, or leave empty to keep current style (optional)

Options reference

The defaults may be modified at runtime in $.fn.progress.defaults, and options may be passed inline using the data-progress-options attribute

min

Minimum value
Type: number
Default: 0

max

Maximum value
Type: number
Default: 100

round

True to round value, a number to set the float length, or false to not round at all
Type: boolean|int
Default: true

step

Size of each interval between min and max, or a list of points to snap the progress bar to
Type: number|array
Default: null

value

Progress value (only used if not passed as parameter or given as text in the target element)
Type: number
Default: 0

orientation

Orientation of the progress ('horizontal' or 'vertical')
Type: string
Default: 'horizontal'

style

Track size ('thin', 'large' or empty for normal)
Type: string
Default: null

showValue

True to show value, false to hide
Type: boolean
Default: true

barClasses

Class or list of class for the bar
Type: string|array
Default: null

barMode

Mode of progress bar : 'min' to range from left to value, 'max' to range from value to right (reverted in RTL)
Type: string
Default: 'min'

innerMarksOverBar

Set to true to show inner marks over the bar
Type: boolean
Default: false

stripes

Enable animated stripes
Type: boolean
Default: false

animatedStripes

True for animated stripes (only on compatible browsers)
Type: boolean
Default: true

darkStripes

True for dark stripes, false for white stripes
Type: boolean
Default: true

stripesSize

Stripes size: 'big', 'normal' or 'thin'
Type: string
Default: 'normal'

animate

Animate bar moves
Type: boolean
Default: true

animateSpeed

Speed for animations (any jquery valid value)
Type: string|int
Default: 'fast'

Track options reference

These options are shared with the slider feature:

The defaults may be modified at runtime in $.fn.buildTrack.defaults

size

Width/height of the track (any css value, int will be used as pixels), or false for fluid size
Type: int|string|boolean
Default: 250

classes

Class or list of class for the bar
Type: string|array
Default: null

css

Any extra css styles, in a key/value map
Type: object
Default: {}

orientation

Orientation of the track ('horizontal' or 'vertical')
Type: string
Default: 'horizontal'

innerMarks

Inner marks, may be:

a number

marks will be created each multiple of this number, starting from 'min'

an array

a list of points where marks should be created.

Type: string|array
Default: null

topMarks

Top marks, may be:

a number

marks will be created each multiple of this number, starting from 'min'

an array

a list of points where marks should be created. Each point can be either a number or an object with a value and two optional properties, 'label' and 'align': { value: x, label: 'label', align: 'center' }.
If the point is a number or if 'label' is not set, an automatic label will be created if topLabel is set.
If the point is a number or if 'align' is not set, the value of topLabelAlign will be used.

Type: string|array
Default: null

topLabel

Automatic label for top marks. Use true to display mark value, or a string with [value] as a placeholder for each mark value, for instance: '[value]%'
Type: boolean|string
Default: null

topLabelAlign

Alignement for top marks labels: 'left', 'center' or 'right'
Type: string
Default: 'center'

rightMarks

Right marks, may be:

a number

marks will be created each multiple of this number, starting from 'min'

an array

a list of points where marks should be created. Each point can be either a number or an object with a value and an optional properties, 'label': { value: x, label: 'label' }.
If the point is a number or if 'label' is not set, an automatic label will be created if rightLabel is set.

Type: string|array
Default: null

rightLabel

Automatic label for right marks. Use true to display mark value, or a string with [value] as a placeholder * for each mark value, for instance: '[value]%'
Type: boolean|string
Default: null

rightLabelAlign

Alignement for right marks labels: 'top', 'center' or 'bottom'
Type: string
Default: 'center'

bottomMarks

Bottom marks, may be:

a number

marks will be created each multiple of this number, starting from 'min'

an array

a list of points where marks should be created. Each point can be either a number or an object with a value and two optional properties, 'label' and 'align': { value: x, label: 'label', align: 'center' }.
If the point is a number or if 'label' is not set, an automatic label will be created if bottomLabel is set.
If the point is a number or if 'align' is not set, the value of bottomLabelAlign will be used.

Type: string|array
Default: null

bottomLabel

Automatic label for top marks. Use true to display mark value, or a string with [value] as a placeholder for each mark value, for instance: '[value]%'
Type: boolean|string
Default: null

bottomLabelAlign

Alignement for bottom marks labels: 'left', 'center' or 'right'
Type: string
Default: 'center'

leftMarks

Left marks, may be:

a number

marks will be created each multiple of this number, starting from 'min'

an array

a list of points where marks should be created. Each point can be either a number or an object with a value and an optional properties, 'label': { value: x, label: 'label' }.
If the point is a number or if 'label' is not set, an automatic label will be created if leftLabel is set.

Type: string|array
Default: null

leftLabel

Automatic label for left marks. Use true to display mark value, or a string with [value] as a placeholder for each mark value, for instance: '[value]%'
Type: boolean|string
Default: null

leftLabelAlign

Alignement for left marks labels: 'top', 'center' or 'bottom'
Type: string
Default: 'center'

insetExtremes

Automaticaly set alignement (if not set) to inset the labels of marks matching min and max
Type: boolean
Default: false

autoSpacing

Will add spacing margins to the track, matching space required by marks and labels - true to enable, false to disable.
Setting a numeric value will enabled auto-spacing and add this as an extra margin on top of calculated one.
Type: boolean
Default: false

autoSpacingTop

Auto top spacing: true to enable, false to disable, null to inherit from autoSpacing.
Setting a numeric value will enable auto-spacing and add this as an extra margin on top of calculated one.
Type: boolean|int
Default: null

autoSpacingRight

Auto right spacing: true to enable, false to disable, null to inherit from autoSpacing.
Setting a numeric value will enable auto-spacing and add this as an extra margin on top of calculated one.
Type: boolean|int
Default: null

autoSpacingBottom

Auto bottom spacing: true to enable, false to disable, null to inherit from autoSpacing.
Setting a numeric value will enable auto-spacing and add this as an extra margin on top of calculated one.
Type: boolean|int
Default: null

autoSpacingLeft

Auto left spacing: true to enable, false to disable, null to inherit from autoSpacing.
Setting a numeric value will enable auto-spacing and add this as an extra margin on top of calculated one.
Type: boolean|int
Default: null

autoSpacingCenterVertical

When auto-spacing, equalize top and bottom margins to the highest - for instance to keep alignement on baseline
Type: boolean
Default: false

autoSpacingCenterHorizontal

When auto-spacing, equalize left and right margins to the highest - for instance to center in a block
Type: boolean
Default: false