Ok I have tested out the app and the jsFiddle on my device and got it working. By comparing the jsFiddle and your app in developer tools I identified certain differences in the CSS styling. Try adding a few lines to your CSS for .progress. Check this out:
.progress {
position: absolute;
box-sizing: border-box;
box-shadow: inset 0px 0 5px 0 #777;
-webkit-box-shadow: inset 0px 0 5px 0 #777;
right: 0px;
height: 100%;
/* margin-top: 0px; */
background-color: orange;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
transition-duration: 0.5s, 0.5s;
-webkit-transition-duration: 0.5s; /* for Safari */
-webkit-transition-property: width, background;
-webkit-transition-timing-function: ease-in-out, ease-in-out;
transition-property: width, background;
transition-timing-function: ease-in-out, ease-in-out;
-webkit-transform: translateZ(0);
}
It is pulsing on my phone now. Try it out and let me know!
Also, check out this link that describes the page event order in jQuery Mobile.
http://www.gajotres.net/page-events-order-in-jquery-mobile/
You do not need to chain nest the page event functions inside the deviceready function.
Also, the progress bar continues to pulse even after I press the reset button, so I added this function to cancel the pulse animation on reset:
function cancelPulse(element) {
$(element || this).stop(true, false);
var color = GetColorForVal(100);
$("#slider .progress").css({"background": color, "width": (100) + "%", "opacity": 1});
}