locked
How to add loading/Progress bar in a Windows store App

    Question

  • Hello

    I am working on a windows tore HTML5 app that downloads data from internet and show on a page.

    i want to implement a Loading or progress bar. Can any one please tell me how can i implement a loading or progress bar.

    I want to show this progress bar on Splash screen and want to hide progress bar and move  to next page when content is downloaded. 

    Thanks

    Sajid

    Friday, April 11, 2014 8:03 PM

Answers

  • Saturday, April 12, 2014 12:47 AM
    Owner
  • From my experience(just playing with the code), I just set the display of the progress bar to "none", and when I want to show it, I set it to "inline", for example in javascript:

    var pbar = document.getElementById('pbar');
    var pRing= document.getElementById('pRing');
    
    //For indeterminant bar
    startAsyncFcn().then(function(){
           //show the indeterminant progress
           pRing.style.display = 'inline';
    
           //show progress bar
           pbar.style.display.style = 'inline';
           //increment progress bar
           pbar.value += 100;       
    
       }).done(function(){
           //hide progress bars
           pRing.style.display = 'none';
           pbar.style.display.style = 'none';
           
    })

    I don't know if this is the best way... but it works! :)


     
    • Proposed as answer by datQkiD2 Tuesday, April 15, 2014 5:31 AM
    • Marked as answer by Jamles HezModerator Tuesday, April 22, 2014 8:28 AM
    Tuesday, April 15, 2014 5:30 AM

All replies

  • Saturday, April 12, 2014 12:47 AM
    Owner
  • Many thanks for your answer but lik you shared i.e http://msdn.microsoft.com/en-us/library/windows/apps/hh465487.aspx is not enough for me to understands.

    It just has a simple HTML code and few lines of Javascript.

    I am unable to understand it. 

    I have a RSS reader app that reads content from an RSS feed and display it on Screen. I want to show a progress bar untill the Feeds are loaded on to user screen. Please tell me how can i do this.

    Thanks

    Sajid

    Saturday, April 12, 2014 8:27 PM
  • From my experience(just playing with the code), I just set the display of the progress bar to "none", and when I want to show it, I set it to "inline", for example in javascript:

    var pbar = document.getElementById('pbar');
    var pRing= document.getElementById('pRing');
    
    //For indeterminant bar
    startAsyncFcn().then(function(){
           //show the indeterminant progress
           pRing.style.display = 'inline';
    
           //show progress bar
           pbar.style.display.style = 'inline';
           //increment progress bar
           pbar.value += 100;       
    
       }).done(function(){
           //hide progress bars
           pRing.style.display = 'none';
           pbar.style.display.style = 'none';
           
    })

    I don't know if this is the best way... but it works! :)


     
    • Proposed as answer by datQkiD2 Tuesday, April 15, 2014 5:31 AM
    • Marked as answer by Jamles HezModerator Tuesday, April 22, 2014 8:28 AM
    Tuesday, April 15, 2014 5:30 AM