Animation Start event doesn't seem to be working about jquery-circle-progress

[kottenator]

First: I've checked and the event works fine:

var el = $('.circle-container').circleProgress({ value: 0.5 });
el.on('circle-animation-start', function () { console.log('animation started'); });
el.on('circle-animation-end', function () { console.log('animation finished'); });

Second: what you want to do is definitely should be done via CSS, like so:

.circle-container {
    position: relative;
    /* you don't have to set width and height */
}

.circle-container .middle-block {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .5);
}

[keithpickering]

So I'm having this same issue for some reason, here is my code:

// Hide until animation starts
$this.css('opacity', 0);
var circle = $this.circleProgress({
    value: progress,
    size: 120,
    thickness: 5,
    reverse: true,
    startAngle: -Math.PI / 2,
    animation: {
        duration: 1200,
    },
    fill: {
        image: 'img/progress/meter-bg.png'
    },
    emptyFill: 'rgba(255,255,255,0.1)',
 });

circle.on('circle-animation-start', function(e) {
    console.log('start');
    $this.css('opacity', 1);
});

Nothing happens on the circle-animation-start event.