Comment faire une barre de progression

Question

Comment faire une barre de progression en html/css/javascript. Je n'ai pas vraiment envie d'utiliser le Flash. Quelque chose le long des lignes de ce qui peut être trouvé ici: http://dustincurtis.com/about.html

Tout ce que je veux vraiment, c'est une "barre de progression" qui change pour les valeurs que je donne en PHP. Quel serait votre, bien que le procès? Existe-il des bons tutoriels sur cette?

Answer 1

Vous pouvez le faire par le contrôle de la largeur d'une div via css. Quelque chose d'à peu près le long de ces lignes:

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

Que la valeur de la largeur peuvent être envoyés à partir de php si vous le désirez.

Answer 2

Si vous utilisez HTML5 de son mieux pour rendre l'utilisation de <progress> balise qui a été nouvellement introduit.

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

Ou de créer une barre de progression de votre propre.

Exemple écrit dans le 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 3

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

Vérifier cela, il pourrait être ce dont vous avez besoin.

Answer 4

Vous pouvez utiliser progressbar.js; Animé contrôle de barre de progression et de minuscules graphique (graphique sparkline)

Démo et téléchargement; http://bug7a.github.io/progressbar.js/

HTML utilisation;

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

Javascript utilisation;

var progressBar;

window.onload = function(){

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

}

Answer 5

J'ai essayé avec une simple barre de progression. Il n'est pas cliquable affiche juste le pourcentage réel. Il y a une bonne explication et le code ici: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/