web-dev-qa-db-fra.com

Comment faire une barre de progression

Comment peut-on s'y prendre pour faire une barre de progression en html/css/javascript. Je ne veux pas vraiment utiliser Flash. Quelque chose dans le sens de ce que l'on peut trouver ici: http://dustincurtis.com/about.html

Tout ce que je veux vraiment, c'est une "barre de progression" qui modifie les valeurs que je donne en PHP. Quel serait votre processus si? Existe-t-il de bons tutoriels à ce sujet?

javascripthtmlcssprogress-bar
36
john mossel

Vous pouvez le faire en contrôlant la largeur d'une div via css. Quelque chose de grossier dans ce sens:

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

Cette valeur de largeur peut être envoyée depuis php si vous le souhaitez.

42
Sam Dufel

Si vous utilisez HTML5, il est préférable d’utiliser la balise <progress> qui vient d’être introduite.

<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');
26
najeeb

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

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

12
SapphireSun

Vous pouvez utiliser le contrôle progressbar.js; de la barre de progression animée et le petit graphique

Démo et téléchargement link

enter image description here

Utilisation de 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);

}
10
bugra ozden

Fondamentalement, il s’agit de ceci: Vous avez trois fichiers: Votre script long PHP, une barre de progression contrôlée par Javascript ( @SapphireSun donne une option ) et un script de progression. La partie difficile est le script de progression; votre long script doit pouvoir rendre compte de sa progression sans communication directe avec votre script de progression. Cela peut prendre la forme d'identificateurs de session mappés sur des compteurs de progression, une base de données ou une vérification des éléments non terminés.

Le processus est simple:

  1. Exécuter votre script et mettre à zéro la barre de progression
  2. En utilisant AJAX, interrogez votre script de progression
  3. Le script de progression doit en quelque sorte vérifier les progrès
  4. Changer la barre de progression pour refléter la valeur
  5. Nettoyer quand fini
6
TheLQ

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

5
Fricike

Voici mon approche, j'ai essayé de le 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

enter image description here

4
fubo

Barre de progression infinitive utilisant du 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/

3
pymen

Je sais que ne fonctionne pas actuellement car les navigateurs ne le prennent pas encore en charge, mais cela aidera peut-être un jour:

Au moment de cet article, attr() sur des propriétés autres que content est simplement un Recommandation du candidat1. Dès qu'il sera implémenté, vous pourrez créer une barre de progression avec un seul élément (comme HTML 5 <progress/>, mais avec de meilleures options de style et du texte à l'intérieur).

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

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

Voici la démo en cours ne fonctionne pas .

1 Je ne peux pas imaginer pourquoi cela n’est implémenté dans aucun navigateur. Premièrement, je penserais 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é. Espérons qu'ils commenceront bientôt à le supporter, sinon cela ne fera même pas partie de la spécification finale.

1
Linus Caldwell

J'ai utilisé cette barre de progression . Pour plus d'informations à ce sujet, vous pouvez passer par link , c'est-à-dire 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>

J'espère que cela pourra être utile à quelqu'un.

1
surhidamatya

Vous pouvez créer une barre de progression de tout élément HTML sur lequel vous pouvez définir un dégradé. (Pretty cool!) Dans l'exemple ci-dessous, l'arrière-plan d'un élément HTML est mis à jour avec un dégradé linéaire avec JavaScript:

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

Post-scriptum J'ai défini les deux emplacements percentage le même pour créer une ligne dure. Jouez avec le design, vous pouvez même ajouter une bordure pour obtenir le look classique de la barre de progression :)

 enter image description here

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

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

Si vous avez besoin d'afficher et de masquer 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 de l'image: Télécharger l'image à partir d'ici

0
Pir Fahim Shah

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

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

Vous pouvez utiliser ProgressBar.js . Aucune dépendance, API facile et supporte les principaux navigateurs. 

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

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

0
Kimmo