jQM - Progress bar plugin

by Trae

HTML

<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<div data-role="page" id="index"> 
<div data-role="content" data-theme="a">
    <span>Downloading configurations.</span>
    <input name="ConfigurationProgress" id="configSlider" data-highlight="true" min="0" max="100" value="0" type="range" class="ui-slider-input" style="display: none; margin-left: -9999px;"></input> <span>Loading  products.</span>

    <input name="ProductsProgress" id="productSlider" data-highlight="true" min="0" max="100" value="0" type="range" class="ui-slider-input" style="display: none; margin-left: -9999px;"></input>
    </div>
</div>

CSS

/*!
* jQuery Mobile 1.4.5
* Git HEAD hash: 68e55e78b292634d3991c795f06f5e37a512decc <> Date: Fri Oct 31 2014 17:33:30 UTC
* http://jquerymobile.com
*
* Copyright 2010, 2014 jQuery Foundation, Inc. and othercontributors
* Released under the MIT license.
* http://jquery.org/license
*
*/


/* Globals */
/* Font
-----------------------------------------------------------------------------------------------------------*/
html {
	font-size: 100%;
}
body,
input,
select,
textarea,
button,
.ui-btn {
	font-size: 1em;
	line-height: 1.3;
	 font-family: sans-serif /*{global-font-family}*/;
}
legend,
.ui-input-text input,
.ui-input-search input {
	color: inherit;
	text-shadow: inherit;
}
/* Form labels (overrides font-weight bold in bars, and mini font-size) */
.ui-mobile label,
div.ui-controlgroup-label {
	font-weight: normal;
	font-size: 16px;
}
/* Separators
-----------------------------------------------------------------------------------------------------------*/
/* Field contain separator (< 28em) */
.ui-field-contain {
	border-bottom-color: #828282;
	border-bottom-color: rgba(0,0,0,.15);
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
/* Table opt-in classes: strokes between each row, and alternating row stripes */
/* Classes table-stroke and table-stripe are deprecated in 1.4. */
.table-stroke thead th,
.table-stripe thead th,
.table-stripe tbody tr:last-child {
	border-bottom: 1px solid #d6d6d6; /* non-RGBA fallback */
	border-bottom: 1px solid rgba(0,0,0,.1);
}
.table-stroke tbody th,
.table-stroke tbody td {
	border-bottom: 1px solid #e6e6e6; /* non-RGBA fallback  */
	border-bottom: 1px solid rgba(0,0,0,.05);
}
.table-stripe.table-stroke tbody tr:last-child th,
.table-stripe.table-stroke tbody tr:last-child td {
	border-bottom: 0;
}
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
	background-color: #eeeeee; /* non-RGBA fallback  */
	background-color: rgba(0,0,0,.04);
}
/*...

JavaScript

var progressBar = {
    setValue: function (id, value) {
        $(id).val(value);
        $(id).slider("refresh");
    }
}

$(function () {

    // Test
    var i = 1;
    var j = 1;
    var interval = setInterval(function () {
        progressBar.setValue('#configSlider', i);
        if (i === 100) {
            clearInterval(interval);
            var interval2 = setInterval(function () {
                progressBar.setValue('#productSlider', j);
                if (j === 100) {
                    clearInterval(interval);
                }
                j++;
            }, 100);
        }
        i++;
    }, 100);


});