Comment faire une barre de progression

si vous utilisez HTML5 il est préférable de faire usage de <progress> étiquette qui a été nouvellement introduit.

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

ou créez votre propre barre de progression.

exemple écrit 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');

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

regardez ça, c'est peut-être ce dont vous avez besoin.

vous pouvez utiliser progressbar.js; barre de progression animée contrôle et petit graphique (sparkline)

Démo et télécharger lien

usage HTML;

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

utilisation de Javascript;

var progressBar;

window.onload = function(){

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

}

essentiellement son ceci: vous avez trois fichiers: votre script PHP de longue durée, une barre de progression contrôlée par Javascript ( @Saphiresun donne une option ), et un script de progression. La partie difficile est le Script de progression; votre script long doit être capable de rapporter sa progression sans communication directe avec votre script de progression. Cela peut prendre la forme d'un id de session mappé à des compteurs progressifs, d'une base de données ou d'une vérification de ce qui n'est pas terminé.

le le processus est simple:

1. Exécuter votre script et de le remettre à zéro la barre de progression
2. en utilisant AJAX, interrogez votre script de progression
3. Progrès script doit en quelque sorte de vérifier les progrès
4. Modifier la barre de progression pour refléter la valeur
5. nettoyer une fois terminé

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

Voici mon approche, j'ai essayé de la garder mince:

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

Violon: ici

barre de progression Infinitive en Javascript pur

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

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

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

je sais que le suivant ne fonctionne pas actuellement parce que les navigateurs ne le prennent pas encore en charge, mais peut-être qu'un jour cela aidera:

au moment de ce post attr() sur d'autres propriétés que content est juste un recommandation du candidat ¹ . Dès qu'il est mis en œuvre, on peut créer une barre de progression avec un seul élément (comme le HTML 5 <progress/> , mais avec un meilleur style options de texte et de l'intérieur)

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

et CSS pur

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

Ici est le pas de travail démo .

¹ Je ne peux pas imaginer pourquoi cela n'est pas implémenté dans n'importe quel navigateur. Tout d'abord, je pense que si vous avez déjà la fonctionnalité pour content , il ne devrait pas être trop difficile d'étendre cela (mais bien sûr, je ne sais pas vraiment pour être honnête). Deuxièmement: ce qui précède n'est qu'un bon exemple de la puissance de cette fonctionnalité. J'espère qu'ils commencent à le soutenir bientôt, ou il ne sera même pas partie de la spécification.

j'ai utilisé ce barre de progression . Pour plus d'informations à ce sujet, vous pouvez aller à travers ce lien I. e personnalisation, codage, 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>

espérons que cela puisse être utile à quelqu'un.

, Vous pouvez créer une barre de progression de n'importe quel élément html que vous pouvez définir un gradient. (Pretty cool!) Dans l'exemple ci-dessous, le fond D'un élément HTML est mis à jour avec un gradient linéaire avec JavaScript:

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

PS j'ai paramétré les deux emplacements percentage de la même façon pour créer une ligne dure. Jouer avec le design, vous pouvez même ajouter une bordure pour obtenir ce classique progrès-barre look:)

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

vous pouvez recréer la barre de progression en utilisant des animations CSS3 pour lui donner un meilleur look.

JSFiddle Démo

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

vous pouvez utiliser ProgressBar.js . Pas de dépendances, API facile et prend en charge les principaux navigateurs.

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

Voir plus d'exemples d'utilisation dans la page de démonstration.

si vous devez afficher et cacher la barre de progression dans votre script php et java, suivez cette étape.C'est une solution complète, pas besoin de bibliothèque, 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>

lien D'Image: télécharger l'image d'ici