Discussion :

[Clementcapo]

Bonjour,

Je suis en train de faire des tests sur cette jolie progress bar que voici : https://codepen.io/shankarcabus/pen/GzAfb

Au début j'ai cherché à la faire changer de couleurs en fonction du % franchis :

Code :

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

1
2
3
4
5
6
7
8
9
$(function(){
  var $ppc = $('.progress-pie-chart'),
    percent = parseInt($ppc.data('percent')),
    deg = 360*percent/100;
  if (percent > 50) {
    $ppc.addClass('gt-50');
  }
    if (percent > 200) {
    $ppc.addClass('gt-200');

Par exemple ici on retrouve un palier pour 50% et un pour 200%.

Mais la c'est le drame. j'ai essayé d'ajouter un texte (<div class="mih">oui</div> par exemple) mais impossible de le changer en fonction du % j'ai vu qu'il y avait plusieurs méthodes pendant mes recherches mais je suis un peu perdu ça parait tout bête pourtant : /.

Ma question est donc quel ligne de code appliquer pour dire par exemple "if (percent > 50) alors le texte sera "bonjour" et "if (percent > 200) alors le texte sera "salut" ?
Voici un exemple par image :



Merci beaucoup et bonne journée !

Cordialement

[mathieu]

le JavaScript a l'air correct mais il manquait des règles CSS pour faire des modifications
https://codepen.io/anon/pen/QKOopg

j'ai ajouté les règles suivantes :

Code :

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

1
2
3
4
5
6
.gt-50 .ppc-progress {
    background: #FC9; /* couleur de la partie supérieure à 50 % */
}
.gt-50 .ppc-percents span {
    color : #FC9; /* couleur du texte quand le nombre est supérieur à 50 %*/
}