Ember liquid-fire progressbar animation

Currently I'm trying to find out how liquid-fire is applicable to a component. The docs aren't really helping me out.

Basically, what I want is rather simple. I have two components which together form a progress-bar. I want the progress-bar to be animated when the progress value changes. The code:

// progress-bar/component.js
import Ember from 'ember';

export default Ember.Component.extend({

    classNames: ['progress'],
    attributeBindings: ['progressBarRole:role', 'tabIndex:tabindex', 'progress:aria-valuenow', 'ariaValueMin:aria-valuemin', 'ariaValueMax:aria-valuemax'],

    progressBarRole: 'progressbar',
    tabIndex: 0,
    ariaValueMin: 0,
    ariaValueMax: 100,

});

// progress-bar/template.hbs
{{progress-bar/progress-meter total=total progress=progress}}

// progress-bar/progress-meter/component.js
import Ember from 'ember';

export default Ember.Component.extend({

    classNames: ['progress-meter'],
    attributeBindings: ['widthValue:style'],

    widthValue: function() {
        var progress = ( this.get('progress') / ( this.get('total') ) ) * 100;
        return Ember.String.htmlSafe( 'width: ' + progress + '%' );
    }.property('progress')

});

// progress-bar/progress-meter/template.hbs is empty.

What I've tried is:

{{#liquid-bind model.module.progress}}
   {{progress-bar total=100 progress=model.module.progress}}
{{/liquid-bind}}

But that does not work at all. I also tried using the animate() function in the progress-meter component, but without any luck. I honestly haven't got a single clue on how to make this work.

Hopefully someone can point me in the right direction! Thanks a lot.