Mobile progress bar [closed]

Question

I am searching for a progress bar (or slider without thumb which would not be interaction enabled).

I want to use it in a HTML5 project with jQuery mobile for iOS/Android/Windows mobile. On mobile browsers progress is currently not supported.

Does anyone have code or knows about a plugin (I do not want to integrate jQuery UI just for that element)

Answer 1

Intro

jQuery Mobile can be still used for this, mainly because so styles can stay the same.

Example

Working example: http://jsfiddle.net/Gajotres/mFqUd/

Example has a working demo so take a look. If this is what you need I will create a plugin out of it.

Code

This code will create slider without visible in put and slider button:

$('<input>').appendTo('[ data-role="content"]').attr({'name':'slider','id':'slider','data-highlight':'true','min':'0','max':'100','value':'50','type':'range'}).slider({
    create: function( event, ui ) {
        $(this).parent().find('input').hide();
        $(this).parent().find('input').css('margin-left','-9999px'); // Fix for some FF versions
        $(this).parent().find('.ui-slider-track').css('margin','0 15px 0 15px');
        $(this).parent().find('.ui-slider-handle').hide();
    }
}).slider("refresh");  

Progress bar parent container must be set in .appendTo().... part.

This function is then used to change progress bar value and change its visual style:

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

id is progress bar id and value is needed value. Slider is set to work between 0 and 100, so any integer value will count as percentage value.

Answer 2

Gajotres's answer above helped me reach the perfect solution.

First simply add a jQuery Mobile Slider element to your page

<input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50">

Then magic happens with jQuery:

$( "#page-progress" ).on( "pagebeforeshow", function( event ) {
    $("input").remove();
    $(".ui-slider-handle").remove();
    $('.ui-slider-track').css('margin','0 15px 0 15px').css('pointer-events','none');
});

This will result in a progress static progress bar of which you can programmatically change. User input is disabled so users can't drag the progress bar.

This worked great for me as I was wanting to show a static progress bar (not a loading bar). Additional work is required to animate or change programmatically. Enjoy!