Progress pourcentage CSS

Version imprimable

29/01/2014, 16h14
Independant44

Progress pourcentage CSS

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!!!!:ccool:
29/01/2014, 19h05
NoSmoking

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

Citation:

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.

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

Code:

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

Code:

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

29/01/2014, 20h49
Independant44

j'ai trouvé

Ok merci pour les indics!!!

Si certains recherchent cela…

http://jsfiddle.net/KzrwQ/1/

et on adapte…

Merci!!!!!!!!!!
29/01/2014, 20h51
SylvainPV

L'élément <progress> semble indiqué pour ça : https://developer.mozilla.org/fr/doc...ement/Progress