Jak utworzyć progressbar pracy dla Cordova transferu plików

Question

tylko proste pytanie:

użyłem skryptu z Raymond Camden Progress Event in Cordova File-Transfer i działa dobrze. Wyświetla procent jako tekst, który się liczy, aż osiągnie 100%.

Działa to dobrze, ale nie wygląda dobrze. Jak mogę utworzyć pasek postępu, który zaczyna się od zera i liczy się do 100% i ma zielony pasek, który rośnie?

Nie jestem tak dobry w javascript, więc nie wiem, jak to zrealizować.

To jest mój kod teraz:

var statusDom; 

statusDom = document.querySelector('#status'); 

ft.onprogress = function(progressEvent) { 
      if (progressEvent.lengthComputable) { 
     var perc = Math.floor(progressEvent.loaded/progressEvent.total * 100); 
    statusDom.innerHTML = perc + "% loaded..."; 
      console.log(perc); 
      } else { 
        if(statusDom.innerHTML == "") { 
        statusDom.innerHTML = "Loading"; 
      } else { 
        statusDom.innerHTML += "."; 
      } 
     } 
    }; 

iw moim indeksie mam kontener div ->

<div id="status"></div> 

nadzieję, że ktoś może mi powiedzieć, jak utworzyć progressbar. Byłoby wspaniale, gdybyś dał mi szczegółowe wyjaśnienie. Dziękuję Ci!

Answer 1

Jednym z najprostszych sposobów jest prawdopodobnie użycie natywnego paska postępu HTML5: <progress></progress>.

umieścić tych znaczników gdzie chcesz mieć progressbar i ustawić max i value właściwości gdzie:

• max jest maksymalna wartość pasek postępu może reprezentować kiedy jest w pełni załadowany (100% w danym przypadku)
• value to rzeczywista wartość paska perc w twoim przypadku.

Więc można umieścić coś takiego w kodzie HTML:

<progress max="100" value="0" id="ft-prog"></progress> 

Następnie dodać coś takiego po statusDom.innerHTML = perc + "% loaded...";:

document.getElementById("ft-prog").value = perc; 

Można budować/projekt bardziej fantazyjne paski postępu z Oczywiście stylizacja Twojego tagu progress w CSS.
można uzyskać kilka ciekawych pomysłów stąd używając CSS3: CSS-Tricks progress bars

Answer 2

Powyżej znajduje się pełna przykładów z paskiem postępu. Używam go w moim app

<div class="progress sell_progress_bar"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="{{ upload_percentage }}" aria-valuemin="0" aria-valuemax="100" style="width:{{ upload_percentage }}%"> 
     <span class="sr-only">100% Complete</span> 
    </div> 
</div> 

Dla ścisłości używam angularjs