mathtrainingstuff/CalculatorMainPage.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import "./"

Page {
    id: root

    signal pageOpened()

    Label {
        id: num
        anchors.centerIn: parent
        font.pixelSize: parent.height * 0.6
        text: calculator.nextNum
    }

    Label {
        id: gameProcess
        text: calculator.actualNumCount + " of " + calculator.numCount
        font.pixelSize: parent.width * 0.05
        anchors {
            right: parent.right
            rightMargin: parent.width * 0.025
            bottom: parent.bottom
            bottomMargin: parent.height * 0.05
        }
    }


    ProgressBar {
        id: prog
        property int progress: 0
        //property string col: "green"
        value: progress/100
        anchors {
            bottom: parent.bottom
            bottomMargin: parent.height * 0.02
            left: parent.left
            leftMargin: parent.width * 0.01
            right: parent.right
            rightMargin: parent.width * 0.01
        }


        /*
        progress: Rectangle {
            color: col
        }
        */

        NumberAnimation {
            id: progNumAnim
            target: prog
            property: "progress"
            from: 100
            to: 0
            duration: tick.interval
            easing.type: Easing.Linear
        }
        /*
        ColorAnimation {
            id: progColAnim
            target: prog
            property: "color"
            from: "green"
            to: "red"
            duration: tick.interval
            easing.type: Easing.Linear
        }
        */
    }

    Timer {
        id: tick
        interval: calculator.tickInterval
        repeat: false
        running: calculator.state === "running"

        onTriggered: {
            if (calculator.actualNumCount < calculator.numCount) {
                nextNumber()
                tick.start()
            }
            else {
                calculator.state = "ending"
            }
        }

        onRunningChanged: {
            if(running){
                progNumAnim.start()
                //progColAnim.start()
            }
        }
    }
}