jquery - Saxon-CE progressbar while processing, rendering blocked? -

i'm using saxon-ce transform xml file. want set progressbar while xslt processor running. somehow seems view blocked. can't set button's value "transforming...". console.log tells me html value of button changed, somehow it's not rendering.

here have far:

function xslt(selected){     $('#transform-button').html('transforming ...');     console.log($('#transform-button').html());     var xsltdata = saxon.requestxml("xslt.xsl");     var xmldata = saxon.parsexml("xml.xml");     var xsltprocessor = saxon.newxslt20processor(xsltdata);     (i = 0; < selected.length; i++) {         var percentage = 100 / selected.length * i;         xsltprocessor.setparameter(null, "selected", selected[i]);         var result = xsltprocessor.transformtodocument(xmlfile);         var resdoc = xsltprocessor.getresultdocuments();         progress(math.round(percentage));     } } 

i'm using bootstrap's "progress-bar progress-bar-striped active".

function progress(val) {     $('.progress-bar').css('width', val + '%').attr('aria-valuenow', val);     $('.progress-bar').text(val + '%');  } 

can me make work? transformation takes long time have make progressbar or spinner or something. spinner can't started in function xslt.

i came along solution :

var onsaxonload = function() {     var xsl = saxon.requestxml("toc.xsl");     var xml = saxon.requestxml("toc.xml");     var proc = saxon.newxslt20processor(xsl);     proc.setsuccess(function(){         removeprogressbar();                 });      setprogressbar();      proc.updatehtmldocument(xml);             }  function setprogressbar(){   //static in body }  function removeprogressbar(){   $('#page_load_progress').remove(); } 

i using full-length progress bar don't need change width. instead update progress bar content set text xslt using evaled event e.g

function updatestatus(status){   $('#progress_status').html(status +' loading... '); } 

from within xslt:

<xsl:variable name="progress_status"   select="concat('updatestatus(&quot;',string($name),'&quot;)')"/> <ixsl:set-property name="dummy"  select="ixsl:eval($progress_status)"/> 

progress snippet

<div id="page_load_progress" class="modal show" data-backdrop="static">     <div class="modal-backdrop  in" style="height:100%"></div>     <div class="modal-dialog text-center">         <div class="modal-content btn active" style="width: 40%">             <div class="modal-body ">                 <progress style="width:100%;" ></progress>                 <div id="progress_status" class="text-info" ></div>             </div>         </div>     </div> </div>