Cómo hacer una barra de progreso

Question

¿Cómo se puede hacer una barra de progreso en html/css/javascript. Realmente no quiero usar Flash. Algo parecido a lo que se puede encontrar aquí: http://dustincurtis.com/about.html

Lo único que realmente quiero es una 'barra de progreso' que cambie los valores que doy en PHP. ¿Cuál sería tu proceso? ¿Hay algún buen tutorial sobre esto?

Answer 1

Puede hacerlo controlando el ancho de un div mediante css. Algo más o menos a lo largo de estas líneas:

<div id="container" style="width:100%; height:50px; border:1px solid black;"> 
    <div id="progress-bar" style="width:50%;/*change this width */ 
     background-image:url(someImage.png); 
     height:45px;"> 
    </div> 
</div> 

Ese valor de ancho puede ser enviado desde php si así lo desea.

Answer 2

http://jqueryui.com/demos/progressbar/

comprobar que fuera, podría ser lo que necesita.

Answer 3

Básicamente esto es lo siguiente: Tiene tres archivos: Su script PHP de larga ejecución, una barra de progreso controlada por Javascript (@SapphireSun gives an option) y un script de progreso. La parte difícil es el Script de progreso; su secuencia de comandos larga debe poder informar su progreso sin comunicación directa con su secuencia de comandos de progreso. Esto puede ser en forma de identificadores de sesión mapeados a los medidores de progreso, una base de datos o una verificación de lo que no está terminado.

El proceso es simple:

1. Ejecutar la secuencia de comandos y cero fuera de la barra de progreso
2. El uso de AJAX, consultar su script progreso
guión
3. Progreso de alguna manera debe verificar el progreso
4. Cambiar la barra de progreso para reflejar el valor
5. Limpiar cuando haya terminado

Answer 4

Si está utilizando HTML5 es mejor utilizar la etiqueta <progress> que se introdujo recientemente.

<progress value="22" max="100"></progress> 

O cree una barra de progreso propia.

Ejemplo escrito en sencha

if (!this.popup) { 
      this.popup = new Ext.Panel({ 
      floating: true, 
      modal: false, 
      // centered:true, 
      style:'background:black;opacity:0.6;margin-top:330px;', 
      width: '100%', 
      height: '20%', 
      styleHtmlContent: true, 
      html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>', 

      }); 
} 
this.popup.show('pop'); 

Answer 5

probé una sencilla barra de progreso. No se puede hacer clic solo muestra el porcentaje real. Hay una buena explicación y código aquí: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/

Answer 6

var myPer = 35; 
$("#progressbar") 
    .progressbar({ value: myPer }) 
    .children('.ui-progressbar-value') 
    .html(myPer.toPrecision(3) + '%') 
    .css("display", "block"); 

Answer 7

sé la siguiente no funciona actualmente porque los navegadores no soportan todavía, pero tal vez algún día esto ayudará a:

En el momento de esta publicación attr() en otras propiedades que content es solo un Candidate Recommendation .Tan pronto como se implementa, se podría crear una barra de progreso con un solo elemento (como el HTML 5 <progress/>, pero con mejores opciones de estilo y texto dentro)

<div class="bar" data-value="60"></div> 

y puro CSS

.bar { 
    position: relative; 
    width: 250px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    background: #003458; 
    color: white; 
} 

.bar:before { 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: attr(data-value %, 0); /* currently not supported */ 
    content: ''; 
    background: rgba(255, 255, 255, 0.3); 
} 

.bar:after { 
    content: attr(data-value) "%"; 
} 

Here is the currently not working demo.

---

No puedo imaginar por qué esto no se lleva a cabo en cualquier navegador. Primero, creo que si ya tienes la funcionalidad para content, no debería ser demasiado difícil extender eso (pero, por supuesto, no sé para ser sincero). Segundo: Lo anterior es solo un buen ejemplo que muestra cuán poderosa puede ser esta funcionalidad. Esperemos que empiecen a admitirlo pronto, o ni siquiera será parte de la especificación final.

Answer 8

Puede utilizar progressbar.js; animado control de barra de progreso y pequeña tabla (minigráfico)

demostración y descarga link

uso de HTML;

<div id="my-progressbar"></div> 

Uso de Javascript;

var progressBar; 

window.onload = function(){ 

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'}); 
    progressBar.setPercent(60); 

} 

Answer 9

He usado este progress bar. Para obtener más información sobre este se puede pasar por esta personalización link es decir, codificación, etc.

<script type="text/javascript"> 

var myProgressBar = null 
var timerId = null 

function loadProgressBar(){ 
myProgressBar = new ProgressBar("my_progress_bar_1",{ 
    borderRadius: 10, 
    width: 300, 
    height: 20, 
    maxValue: 100, 
    labelText: "Loaded in {value,0} %", 
    orientation: ProgressBar.Orientation.Horizontal, 
    direction: ProgressBar.Direction.LeftToRight, 
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1, 
    animationSpeed: 1.5, 
    imageUrl: 'images/v_fg12.png', 
    backgroundUrl: 'images/h_bg2.png', 
    markerUrl: 'images/marker2.png' 
}); 

timerId = window.setInterval(function() { 
    if (myProgressBar.value >= myProgressBar.maxValue) 
     myProgressBar.setValue(0); 
    else 
     myProgressBar.setValue(myProgressBar.value+1); 

}, 
100); 
} 

loadProgressBar(); 
</script> 

la esperanza que esto puede ser útil para somenone.

Answer 10

Puede recrear la barra de progreso utilizando animaciones CSS3 para darle una mejor apariencia.

JSFiddle Demo

HTML

<div class="outer_div"> 
    <div class="inner_div"> 
     <div id="percent_count"> 

    </div> 
</div> 

CSS/CSS3

.outer_div { 
    width: 250px; 
    height: 25px; 
    background-color: #CCC; 
} 

.inner_div { 
    width: 5px; 
    height: 21px; 
    position: relative; top: 2px; left: 5px; 
    background-color: #81DB92; 
    box-shadow: inset 0px 0px 20px #6CC47D; 
    -webkit-animation-name: progressBar; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-fill-mode: forwards; 
} 

#percent_count { 
    font: normal 1em calibri; 
    position: relative; 
    left: 10px; 
} 

@-webkit-keyframes progressBar { 
    from { 
     width: 5px; 
    } 
    to { 
     width: 200px; 
    } 
} 

Answer 11

Usted podría utilizar ProgressBar.js. Sin dependencias, API fácil y compatible con los principales navegadores.

var line = new ProgressBar.Line('#container'); 
line.animate(1); 

ver más ejemplos de uso in the demo page.

Answer 12

Aquí está mi enfoque, he tratado de mantenerlo delgado:

HTML:

<div class="noload"> 
    <span class="loadtext" id="loadspan">50%</span> 
    <div class="load" id="loaddiv"> 
    </div> 
</div> 

CSS:

.load{  
    width: 50%; 
    height: 12px; 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=); 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 

.noload{ 
    width: 100px;  
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);  
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #999999;  
    position: relative; 
} 

.loadtext { 
    font-family: Consolas;  
    font-size: 11px; 
    color: #000000; 
    position: absolute; 
    bottom: -1px; 
} 

violín: here

Answer 13

barra de progreso infinitivo usando JavaScript puro

<div id="container" style="width:100%; height:5px; border:1px solid black;"> 
    <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div> 
</div> 

<script> 
    var width = 0; 
    window.onload = function(e){ 
    setInterval(function() { 
     width = width >= 100 ? 0 : width+5; 
     document.getElementById('progress-bar').style.width = width + '%'; }, 200);    
    } 
</script> 

Ejemplo http://fiddle.jshell.net/1kmum4du/

Answer 14

Si usted necesita para mostrar y ocultar la barra de progreso dentro de su php y java script, luego siga este paso. Es una solución completa, sin necesidad de ninguna biblioteca, etc.

  //Design Progress Bar 

    <style> 
#spinner 
{  
position: absolute; 
left: 50%; 
top: 50%; 
background-color: white; 
z-index: 100; 

height: 200px; 


width: 300px; 
margin-left: -300px; 

    /*Change your loading image here*/ 
    background: url(images/loading12.gif) 50% 50% no-repeat ; 

} 
    </style> 

       //Progress Bar inside your Page 

<div id="spinner" style=" display:none; "> 
</div>         

    // Button to show and Hide Progress Bar 
<input class="submit" onClick="Show()" type="button" value="Show" /> 
<input class="submit" onClick="Hide()" type="button" value="Hide" /> 

      //Java Script Function to Handle Button Event  
<script language="javascript" type="text/javascript"> 
function Show() 
{  
    document.getElementById("spinner").style.display = 'inline'; 
} 
function Hide() 
{  
    document.getElementById("spinner").style.display = 'none'; 
} 

</script> 

enlace Image: Download image from here

Answer 15

Puede crear una barra de progreso de cualquier elemento HTML que se puede establecer un gradiente a. (! Bastante frío) En el ejemplo siguiente, el fondo de un elemento HTML se actualiza con un gradiente lineal con JavaScript:

myElement.style.background = "linear-gradient(to right, #57c2c1 " + percentage + "%, #4a4a52 " + percentage + "%)"; 

PS he puesto ambos lugares percentage la misma para crear una línea dura. Jugar con el diseño, incluso se puede añadir un borde para conseguir ese aspecto clásico-barra de progreso :)

https://jsfiddle.net/uoL8j147/1/