cordova dosya transferi

Question

sadece basit bir soru için bir çalışma progressbar nasıl oluşturulur:

Raymond Camden Progress Event in Cordova File-Transfer den Komut kullanılan ve iyi çalışıyor. Yüzdeyi,% 100'e ulaşana kadar sayan bir metin olarak görüntüler.

Bu iyi çalışıyor, ancak iyi görünmüyor. Sıfırdan başlayan ve% 100'e kadar sayan ve büyüyen yeşil bir çubuğa sahip olan bir ilerleme çubuğu nasıl oluşturabilirim?

Javascript'te çok iyi değilim, bu yüzden bunu nasıl anlayacağımı bilmiyorum.

Bu artık benim Kod geçerli:

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 += "."; 
      } 
     } 
    }; 

ve benim endeksinde i div konteyner var ->

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

umut birisi bir progressbar nasıl oluşturulacağı, bana söyleyebilir. Bana detaylı bir açıklama yaparsanız harika olur. Teşekkür ederim!

Answer 1

Muhtemelen en basit yollardan biri, yerel HTML5 ilerleme çubuğunu kullanmaktır: <progress></progress> etiketleri.

Sen progressbar istiyorum bu etiketleri koymak ve max ve value özellikleri ayarlayın: tam kapasiteli olduğunda ilerleme çubuğu temsil edebilir maksimum değerdir

• max (sizin durumunuzda% 100)
• value, kasanızdaki perc çubuğunun gerçek değeridir./Tasarım daha süslü ilerleme çubukları Sen inşa edebilirsiniz

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

  :

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

  Sonra statusDom.innerHTML = perc + "% loaded..."; sonra böyle bir şey ekleyin:

Yani HTML kodunda böyle bir şey koymak Tabii CSS adresindeki progress etiketinizi şekillendirin.
Burada CSS3 kullanarak bazı güzel fikir edinebilirsiniz: Burada

Answer 2

CSS-Tricks progress bars bir ilerleme çubuğu ile tam bir örnektir. Ben angularjs kullanıyorum Kayıt için benim 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> 

bunu kullanıyorum