Contador de caracteres animado

HTML

<div id="divContenedor">
        <h1>¿En qué estás pensando?</h1>
        <div id="divContador">140</div>
        <div id="divCajaProgreso">
            <div id="divProgreso"></div>
        </div>
        <textarea id="mensaje" maxlength="200"></textarea>
    </div>

CSS

.verde{
    background-color: #00A600;
}

.amarillo{
    background-color: #DFE40E
}

.rojo{
    background-color: #FF2B2B
}
#divContador {
    float:right; /* hacemos que quede dentro del divCajaProgreso */
    margin-right:10px; 
    margin-top: -1px;
    font-family:'Georgia', Times New Roman, Times, serif; 
    font-size:16px; 
    font-weight:bold; 
    color:white;
}

#divCajaProgreso {
    height: 16px; 
    background: #555;
    margin-bottom: 5px;
    border: solid #333 2px;
}

#divProgreso {
    width:0px; /* al comenzar no se debe mostrar */
    height:16px;
}

JavaScript

// número máximo de caracteres
var limite = 200;

$(document).ready(function()
{

    // cada vez que se deja de presionar una tecla
    $("#mensaje").keyup(function(e)
    {

        // obtenemos el texto que está escrito en el textarea
        var box = $(this).val();

        // calculamos el porcentaje entre el texto ingresado y el límite
        var value = (box.length *100) / limite;

        // obtenemos cuántos caracteres quedan
        var resta = limite - box.length;

        // si aún no se llegó al límite
        if(box.length <= limite)
        {

            // modificamos el texto que muestra la cantidad de caracteres que restan
            $('#divContador').html(resta);

            // modificamos el ancho de la barra
            $('#divProgreso').animate({
                "width": value+'%',
            }, 1);

            // si no se llegó al 50%, hacemos que la barra sea de color verde
            if (value < 50) {
                $('#divProgreso').removeClass();
                $('#divProgreso').addClass('verde');
            }
            else if (value < 85) { // si no se llegó al 85% que sea amarilla
                $('#divProgreso').removeClass();
                $('#divProgreso').addClass('amarillo');
            }
            else { // si se superó el 85% que sea roja
                $('#divProgreso').removeClass();
                $('#divProgreso').addClass('rojo');
            };
        }
        else // si se llegó al límite no permitimos ingresar más caracteres
        {
            // evitamos que ingrese más caracteres
            e.preventDefault();
        }               
    });
});