Bonjour,
On m’a demandé de colorer différemment les progress bar en fonction de leur avancement (rouge jusqu’à 75, orange jusqu’à 95, vert sinon)
Comme j’ai fait tout stackoverflow sans trouver de solution, je poste mon bricolage au cas où ça servirait à d’autres. Ce n’est peut-être pas une solution optimale d’ailleurs, mais ça m’a évité de faire du JS qui tend à faire bouger l’écran au chargement.
L’idée est d’utiliser une couleur de type gradient avec les 3 couleurs qui vont de 0% à X% de la barre. X est calculé en fonction de la progression, il vaut soit 0 soit 100.
:root {
--red: #F15B5E;
--orange: #F79151;
--green: #89C73E;
--purple: #6B4D93;
--blue: #1982C4
}
div.progress-bar {
background:
linear-gradient(to right,
var(--red) 0% calc(100% * sign(max(0, calc((attr(aria-valuenow type(<number>)) - 74) * -1)))),
var(--orange) 0% calc(100% * sign(max(0, calc((attr(aria-valuenow type(<number>)) - 95) * -1)))),
var(--green) 0% calc(100% * sign(max(0, calc((95 - attr(aria-valuenow type(<number>))) * -1))))
);
}
td[data-field="cdpPdtCompletion"] .progress-bar{
background:
linear-gradient(to right,
var(--red) 0% calc(100% * sign(max(0, calc((attr(aria-valuenow type(<number>)) - 74) * -1)))),
var(--orange) 0% calc(100% * sign(max(0, calc((attr(aria-valuenow type(<number>)) - 95) * -1)))),
var(--green) 0% calc(100% * sign(max(0, calc((95 - attr(aria-valuenow type(<number>))) * -1))))
);
}
Bonne journée !
Emmanuelle