Progress pourcentage CSS

**Independant44** · 29/01/2014, 16h14

Bonjour!!!

Je souhaiterais intégrer à mon site perso des pourcentages qui progressent de 0 au nombre souhaité quand on arrive sur le site comme une progress bar…
exemple: 59% des utilisateurs utilisent firefox etc…et on voit 0 et 1,2,3,4,5…etc progresser jusqu'à 59%…juste les nombre pas de cercles ou autre…
Je scrute le net mais je dois mal chercher…
Merci d'avance si une réponse arrive!!!!

Bon courage à tous!!!!

**NoSmoking** · 29/01/2014, 19h05

Bonjour,
en HTML pure ou CSS pas sûr!

Je scrute le net mais je dois mal chercher…

Cela peut être une animation gérée en javascript utilisant setTimeout et la modification d'un innerHTML, il ne s'agit ni plus ni moins que d'un compteur.

Invité · 29/01/2014, 20h35

Bonjour,
un petit compteur sympa : http://codepen.io/jreaux62/pen/wIKuv

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
LOTO : <span id="compt1"></span>% des joueurs ont tenté leur chance.
<span id="compt2"></span>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
document.onload = compteur('compt1',59,0);
 
function compteur(id, nbre, i) 
{
      if(i<=nbre){
       setTimeout(function () {
        document.getElementById(id).innerHTML = i;
        document.getElementById(id).style.fontSize = (1+ i/20)+'em';
        i++;
        compteur(id, nbre, i);
       }, 100);
     }else{
         setTimeout(function () {
           document.getElementById('compt2').innerHTML = ' Les autres aussi.';
         }, 1000);
     }
}