Progress documentation for Javascript

General

Getting Started Quick Install Using with Cordova Using with Vue.js Mobiscroll CLI ES6 Modules Instance Utility functions Upgrade Guide v3

Date & Time pickers

Calendar

Usage Options Events Methods Localization Conversion functions

Date & Time

Usage Options Events Methods Localization

Range

Usage Options Events Methods Localization

Timespan

Usage Options Events Methods Localization Conversion functions

Event Calendar

Usage Options Events Methods Localization

Form components

Alerts & Notifications

Alert Confirm Prompt Toast Snackbar

Buttons

Usage Options

Checkbox

Usage Attributes

Dropdown Forms

Usage Options Events Methods Localization Validation Groups

Progress

Usage Attributes Methods

Radio Buttons

Usage Attributes

Segmented

Usage Options

Slider

Usage Attributes Methods

Stepper

Usage Attributes

Switch

Usage Options

Textfields

Usage Attributes

Timer

Usage Options Events Methods Localization

Responsive list

Listview

Usage Options Events Methods Data attributes Localization

Numeric pickers

Measurement

Usage Options Events Methods Temperature Speed Distance Mass Force Localization

Number

Usage Options Events Methods Localization

Numpad

Usage Options Events Methods Localization Decimal Timespan Time Date Conversion functions

Pickers & dropdowns

Color

Usage Options Events Methods Localization

Image

Usage Options Events Methods Data attributes Localization

Rating

Usage Options Events Methods Localization

Scroller

Usage Options Events Methods Localization Conversion functions

Select

Usage Options Events Methods Localization

Treelist

Usage Options Events Methods Localization

Layout & navigation Tools

Icons Language Modules

Accessibility

Section 508 WAI-ARIA Support Keyboard Support RTL Support

Progress

The progress control can be used to display the completion progress of a task

Simple progress with label

<label>
    Loading
    <progress value="30" max="100"></progress>
</label>

With icon

<label>
    <progress value="50" max="100" data-icon="plus" data-icon-align="right"></progress>
</label>

With icons on both sides

<label>
    Loading
    <progress max="100" value="0" data-icon='{ "right": "plus", "left": "minus" }'></progress>
</label>

With value on the left

<label>
    Loading
    <progress max="1000" value="130" data-val="left" ></progress>
</label>

With value on the right

<label>
    Loading
    <progress max="100" value="50" data-icon='{ "left": "plus" }' data-val="right" ></progress>
</label>

With step labels

<label>
    Progress with labels
    <progress max="200" value="50" data-val="right" data-step-labels="[0, 25, 50, 75, 100, 125, 150, 175, 200]"></progress>
</label>

For many more examples - simple and complex use-cases - check out the progress demos for javascript.

Attributes

Name	Description
data-enhance	If a form element has the `data-enhance="false"` attribute, the particular element won't be enhanced.
data-icon	Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select. A font-icon name should be passed. Icon alignment can be controlled with the data-icon-align attribute. Icons can be displayed on both sides by passing and object with `left` and `right` properties containing icon names, e.g.: `data-icon='{ "right": "plus", "left": "minus" }'`. You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: home pencil office newspaper droplet image2 camera play bullhorn connection library book file4 copy2 copy3 stack folder tag cart support phone location credit map history clock alarm2 stopwatch calendar mobile drawer undo2 redo2 forward reply bubble bubbles disk download upload user4 key2 lock2 unlocked cogs aid bars cloud-download cloud-upload globe airplane earth link flag eye eye-blocked attachment star3 heart thumbs-up thumbs-up2 smiley2 sad2 checkmark close plus minus remove loop2 You can use the icons anywhere in your app using the `mbsc-ic mbsc-ic-{iconName}` classes, e.g.: `<div class="mbsc-ic mbsc-ic-star"></div>`
data-icon-align	Specify icon alignment. It can be `"left"` or `"right"`, it defaults to `"left"` if not specified.
data-val	Specify the value position. It can be `"left"` or `"right"`, it defaults to `"left"` if not specified.
disabled	If an element has the `disabled` attribute, the element will be disabled.
max	Specify the final value of the progress.
value	Specify the initial value of the progress.

Methods

Name	Description
getVal()	Returns the progress value. Returns: Number The progress value. Example Methods can be called on an instance. For more details see calling methods `mobiscrollInstance.getVal();`
setVal(value)	Sets the progress value. Parameters `value`: Number - The progress value. Example Methods can be called on an instance. For more details see calling methods `mobiscrollInstance.setVal(50);`

Progress

Attributes

Methods

Returns: Number

Example

Parameters

Example