animation flow backwards

[cescoferraro]

The animation flows backwards when setting the progress back to 0. There should be some sort of reset method, that would maybe hide the progress when it goes back. I am doing it inside my component, maybe thats something that could be dealt inside the progress component itself.

    Insert(event) {
        this.props.SET_INSERT_PROGRESS(0);
        this.props.SET_INSERT_PROGRESS(20);
        event.preventDefault();


        const body = {
            ...
        };

        const progressObserver = Rx.Observer.create(
            (x: ProgressEvent) => {
                console.log(x);
                console.log('Next: ' + x.total);
                let percentage = (x.loaded / x.total) * 100;
                console.log(percentage);
                this.props.SET_INSERT_PROGRESS(percentage)
            },
            (err) => {
                console.log('observerError: ' + err);
            },
            () => {
                this.props.SET_INSERT_PROGRESS(100);
                console.log('Completed');
            }
        );
        Rx.DOM.post({
            url: Utils.API_URL("/add"),
            body: Serialize(body),
            progressObserver: progressObserver
        }).subscribe(
            (xhr: XMLHttpRequest) => {
                let me: User = JSON.parse(xhr.response);
                this.showProgress = false;
                setTimeout(() => {
                    console.log("here");
                    this.props.SET_INSERT_PROGRESS(0);
                    this.showProgress = true;
                }, 500);

            });
    }