Dial - Animated - ReadOnly

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
See:http://anthonyterrien.com/knob/


<input type="text" class="dial" value="60">

JavaScript

var maxVal = 0;
jQuery(document).ready(function ($) {
    maxVal = $('.dial').val();
    $('.dial').val(0).trigger('change').delay(0);
    var myColor = 'red';
    var knob = $(".dial").knob({
        'min': 0,
            'max': 100,
            'readOnly': true,
            'width': 120,
            'height': 120,
            'fgColor': '#333',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true,
            'skin': 'tron'
    });
    var tmr = self.setInterval(function () {
        myDelay();
    }, 50);
    var m = 0;

    function myDelay() {
        m += 1;
        if (m > maxVal) {
            window.clearInterval(tmr);
            return;
        }
        switch (m) {
            case 40:
                myColor = 'yellow';
                break;
            case 70:
                myColor = 'green';
                break;
            case 100:
                window.clearInterval(tmr);
                break;
        }
        $('.dial').trigger('configure', {
            'fgColor': myColor
        });
        $('.dial').val(m).trigger('change');
    }
});