कॉर्डोबा फ़ाइल स्थानांतरण

Question

सिर्फ एक सरल प्रश्न के लिए एक काम प्रगति बनाने के लिए कैसे:

मैं रेमंड कैमडेन Progress Event in Cordova File-Transfer से स्क्रिप्ट का इस्तेमाल किया और यह ठीक काम करता है। यह प्रतिशत को एक पाठ के रूप में प्रदर्शित करता है जो 100% तक पहुंचने तक गिना जाता है।

यह अच्छा काम करता है, लेकिन यह ठीक नहीं दिखता है। मैं एक प्रोग्रेसबार कैसे बना सकता हूं, जो शून्य से शुरू होता है और 100% तक गिना जाता है और इसमें एक हरा बार बढ़ता है?

मैं जावास्क्रिप्ट में इतना अच्छा नहीं हूं इसलिए मुझे नहीं पता कि यह कैसे महसूस किया जाए।

यह अब मेरी कोड है:

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

और मेरे सूचकांक में मैं एक div कंटेनर मिला ->

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

आशा कोई मुझे बता सकते हैं, एक प्रगति बार कैसे बनाते हैं। यदि आप मुझे एक विस्तृत स्पष्टीकरण देते हैं तो यह बहुत अच्छा होगा। धन्यवाद!

Answer 1

शायद मूलभूत HTML5 प्रगति पट्टी का उपयोग करने का सबसे आसान तरीका है: <progress></progress> टैग।

आप इन टैग जहां प्रगति करना चाहते हैं डाल दिया और सेट max और value गुण जहां:

• max अधिकतम मूल्य है, जब यह पूरी तरह से लोड है प्रगति बार प्रतिनिधित्व कर सकते हैं (आपके मामले में 100%)
• value आपके मामले में बार perc का वास्तविक मूल्य है।

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

  तो फिर तुम statusDom.innerHTML = perc + "% loaded..."; के बाद कुछ इस तरह जोड़ें::

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

  आप का निर्माण कर सकते/डिजाइन के अधिक फैंसी प्रगति सलाखों

तो तुम कुछ इस तरह अपने HTML कोड में डाल सीएसएस में अपने progress टैग को स्टाइल करना।
आप यहाँ CSS3 का उपयोग करने से कुछ अच्छा विचार प्राप्त कर सकते हैं: CSS-Tricks progress bars

Answer 2

यहाँ एक प्रगति बार के साथ एक पूर्ण उदाहरण है। मैं अपने ऐप

<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> 

में यह उपयोग कर रहा हूँ रिकॉर्ड के लिए मैं AngularJS का उपयोग कर रहा