1 Getting Started
2 Design Overview
3 Page Controller Boot Process
4 Your First App
5 Page Controller
6 Modules
7 Components
8 jqcEmpty
9 jqcLabel
10 jqcButton
11 jqcLayer
12 jqcPanelDeck
13 jqcAccordion
14 jqcProgressBar
15 Data Binding & Remote Data Synchronization
16 jqcDataService
17 jqcDataModel
18 jqcViewModel
19 jqcList
20 jqcTable
21 jqcForm
22 jqcResponsiveLayoutManager
23 jqcTreeList
24 Demos


This document matches version 1.6.0 .

The jqcProgressBar component is used to display progress bars in your HTML page. It does so by nesting one div element inside another div element, and set the width of the inner div according to the progress set on the component.

The jqcProgressBar will calculate the width of the inner div as

width = outerDivWidth * ( value / maxValue )

Thus, the closer the value of the progress bar is to the maxValue, the more full the progress bar will appear.

jqcProgressBar Example

Here is a jqcProgressBar example:

<div id="progressBar" jqc-type="jqcProgressBar"
    style="width: 300px; border: 1px solid #cc0000; height: 25px;">
    <div style="background-color: #ff0000; height: 25px;"></div>

<span jqc-module="bootModule"></span>


    function bootModule() {
        var bootModule = {};

        bootModule.postConfigure = function() {
            var components = bootModule.jqc.pageController.components;

        return bootModule;


This example creates a jqcProgressBar component and sets its max value to 100 and its current value to 57.

Styling the Progress Bar

The jqcProgressBar component does not style the div elements used to display the progress bar. You will have to do that yourself. In the example in the previous section you can see how to do that with border and background color.


The jqcProgressBar has the following functions you can call:

maxValue(maxValue) Sets the maximum value the progress bar can have. (Before version 0.8.2 this function was called setMaxValue())
value(value) Sets the progress value of the progress bar. (Before version 0.8.2 this function was called setValue())

Target Elements

You can associate a jqcProgressBar component with a div element which has another div element nested inside it. You will have to style the progress bar div elements yourself using CSS.