javascript - ejemplos - Cómo hacer una barra de progreso

crear barra de progreso css

Question

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

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

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

Fiddle: here

Answer 2

Básicamente es esto: tienes tres archivos: tu script PHP de ejecución larga, una barra de progreso controlada por Javascript ( @SapphireSun da una opción ) 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. Ejecute su script y ponga a cero la barra de progreso
2. Usando AJAX, consulta tu script de progreso
3. El script de progreso debe verificar el progreso de alguna manera
4. Cambie la barra de progreso para reflejar el valor
5. Limpie cuando termine

Answer 3

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 4

Intenté una barra de progreso simple. 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 5

Puede crear una barra de progreso de cualquier elemento html para configurar un gradiente. (¡Genial!) En el ejemplo siguiente, el fondo de un elemento HTML se actualiza con un degradado lineal con JavaScript:

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

PD. He establecido percentage ambas ubicaciones iguales para crear una línea dura. Juega con el diseño, incluso puedes agregar un borde para obtener esa apariencia clásica de la barra de progreso :)

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

Answer 6

Puede usar ProgressBar.js . Sin dependencias, API fácil y compatible con los principales navegadores.

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

Vea más ejemplos de uso en la página de demostración.

Answer 7

Puede volver a crear la barra de progreso usando animaciones CSS3 para darle una mejor apariencia.

Demostración de JSFiddle

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 8

Puedes 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 se puede enviar desde php si lo desea.

Answer 9

Puedes usar progressbar.js; Control de barra de progreso animado y gráfico pequeño (sparkline)

link demostración y descarga

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 10

Sé que lo siguiente no funciona actualmente porque los navegadores aún no lo admiten, pero tal vez algún día esto ayude:

En el momento de esta publicación, attr() en otras propiedades aparte del content es solo una Recomendación Candidata ¹ . Tan pronto como se implemente, se podría crear una barra de progreso con solo un elemento (como HTML 5 <progress/> , pero con mejores opciones de diseño y texto dentro)

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

y pure 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) "%";
}

Aquí está la demostración que actualmente no funciona .

¹ No puedo imaginar por qué esto no se implementa en ningún navegador. Primero, creo que si ya tienes la funcionalidad para el 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 11

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

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

O crea 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 12

Si necesita mostrar y ocultar la barra de progreso dentro de su script php y java, siga este paso. Es una solución completa, sin necesidad de 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 de imagen: Descargar imagen desde aquí

Answer 13

Usé esta barra de progreso . Para obtener más información al respecto, puede acceder a este enlace, es decir, personalización, 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>

Espero que esto pueda ser útil para Somenone.

Answer 14

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

Mira eso, podría ser lo que necesitas.

Answer 15

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