Progress bar et ajout de texte

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 :

$(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 le même système avec un texte (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 que :

"if (percent > 50) alors le texte sera "bonjour" et "if (percent > 200) alors le texte sera **"salut" ?

Merci beaucoup et bonne journée !

Cordialement
Modifié par Clementcapo (03 Oct 2016 - 15:07)

Salut,

j'ai rajouté un ID ici

<div id="chart" class="progress-pie-chart" data-percent="54">

et j'ai fait une autre fonction mais je pense que tu peux imbriquer le tout dans la même fonction.

et rajouter une div vide ici

<div class="pcc-percents-wrapper">
      <div class="text"></div>
      <span>%</span>
    </div>

Le script à rajouter après le script de base sur le codepen

$(function(){
  if($('#chart').data('percent') < 50)   {
    $('.text').text('bonjour');
  }
  else{
    $('.text').text('salut');
  }
})

Modifié par SuperMerguez (04 Oct 2016 - 12:15)