Solo una simple pregunta:

Utilicé el script de Raymond Camden Evento de progreso en Cordova File-Transfer y funciona bien. Muestra el porcentaje como un texto que cuenta hasta que alcanza el 100%.

Esto funciona bien, pero no se ve bien. ¿Cómo puedo crear una barra de progreso, que comienza en cero y cuenta hasta el 100% y tiene una barra verde que crece?

No soy tan bueno en JavaScript, así que no sé cómo darme cuenta de esto.

Este es mi código ahora:

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

Y en mi índice obtuve un contenedor div ->

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

Espero que alguien pueda decirme cómo crear una barra de progreso. Sería genial si me das una explicación detallada. ¡Gracias!

7
Sithys 28 ago. 2014 a las 18:57

2 respuestas

La mejor respuesta

Probablemente, una de las formas más simples es utilizar la barra de progreso HTML5 original: etiquetas <progress></progress>.

Coloca estas etiquetas donde desea tener la barra de progreso y establece las propiedades max y value donde:

  • max es el valor máximo que la barra de progreso puede representar cuando está completamente cargada (100% en su caso)
  • value es el valor real de la barra perc en su caso.

Entonces pones algo como esto en tu código HTML:

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

Luego agrega algo como esto después de statusDom.innerHTML = perc + "% loaded...";:

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

Puede crear / diseñar barras de progreso más elegantes, por supuesto, diseñando su etiqueta progress en CSS .
Puede obtener algunas buenas ideas desde aquí usando CSS3 : barras de progreso CSS-Tricks

11
benka 28 ago. 2014 a las 15:57

Aquí hay un ejemplo completo con una barra de progreso. Lo estoy usando en mi aplicación

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

Para el registro estoy usando angularJS

1
Med 18 abr. 2016 a las 10:23