JSFiddle - React, Tailwind, and code Playground

by klarstil

HTML

<div class="test">Ihre Bewertung: <span class="display-green display"></span></div>

<div class="test">Ihre Bewertung: <span class="display-orange display"></span></div>

<div class="test">Ihre Bewertung: <span class="display-red display"></span></div>

CSS

body { font: normal 14px/21px 'Helvetica Neue', 'Helvetica' sans-serif }
.display { font-weight: bold; }

JavaScript

$(function() {
    $({ someValue: 0 }).animate({someValue: 100}, {
        duration: 1000,
	    step: function() {
		    $('.display-green').text(Math.ceil(this.someValue) + "%");
	    }
    });
    
    $('.display-green').animate({
        color: '#27992f'
    }, 1000);
    
    $({ someValue: 0 }).animate({someValue: 32 }, {
        duration: 1000,
	    step: function() {
		    $('.display-red').text(Math.ceil(this.someValue) + "%");
	    }
    });
    
    $('.display-red').animate({
        color: '#d21a13'
    }, 1000);
    
    $({ someValue: 0 }).animate({someValue: 52 }, {
        duration: 1000,
	    step: function() {
		    $('.display-orange').text(Math.ceil(this.someValue) + "%");
	    }
    });
    
    $('.display-orange').animate({
        color: '#de8a18'
    }, 1000);
});


!function(a,b){function m(a,b,c){var d=h[b.type]||{};return null==a?c||!b.def?null:b.def:(a=d.floor?~~a:parseFloat(a),isNaN(a)?b.def:d.mod?(a+d.mod)%d.mod:0>a?0:d.max<a?d.max:a)}function n(b){var c=f(),d=c._rgba=[];return b=b.toLowerCase(),l(e,function(a,e){var f,h=e.re.exec(b),i=h&&e.parse(h),j=e.space||"rgba";return i?(f=c[j](i),c[g[j].cache]=f[g[j].cache],d=c._rgba=f._rgba,!1):void 0}),d.length?("0,0,0,0"===d.join()&&a.extend(d,k.transparent),c):k[b]}function o(a,b,c){return c=(c+1)%1,1>6*c?a+6*(b-a)*c:1>2*c?b:2>3*c?a+6*(b-a)*(2/3-c):a}var k,c="backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor...