Char counter progressbar

by sirtet

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class = "col-md-6">        
    <div class = "form-group">
        <textarea class = "form-control" rows = "7" maxlength = "100" placeholder = "Mindestens 50 Zeichen"></textarea>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
            <span class = "current-value">0%</span>
        </div>
    </div>
    <div class = "count btn btn-primary">100</div>
</div>

CSS

.progress-bar {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

JavaScript

jQuery(document).ready(function() {
    
    $('textarea').keyup(function() {
        var box = $(this).val();
        var main = box.length * 100;
        var value = (main / 100);
        var count = 0 + box.length;
        var reverse_count = 100 - box.length;
        
        if(box.length >= 0){
            $('.progress-bar').css('width', count + '%');
            $('.current-value').text(count + '%');
            $('.count').text(reverse_count);       
         }
        return false;
    });
});