app/resources/qml/components/MainActionButton.qml

import QtQuick 2.0
import QtQuick.Controls 2.9
import QtGraphicalEffects 1.0

import de.itsblue.ScStw 2.0
import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0

DelayButton {
    id : control

    text: "start"
    property color backgroundColor: appTheme.theme.colors.button
    property bool progressControlActivated: false
    property double startProgress
    property double oldStartProgress: -1

    delay: progressControlActivated ? 2000:0

    onStartProgressChanged: {
        if(startProgress > oldStartProgress)
            oldStartProgress = startProgress
        else {
            startProgressAnimation.from = oldStartProgress
            startProgressAnimation.to = startProgress
            startProgressAnimation.start()
        }
    }

    Text {
        id: labelText
        text: control.text
        anchors.centerIn: parent
        font.pixelSize: parent.height * 0.16
        font.family: "Helvetica"
        color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
    }

    NumberAnimation {
        id: startProgressAnimation

        to: 0
        target: control
        properties: "oldStartProgress"
        duration: 200
    }

    Behavior on text {
        //animate a text change
        enabled: true
        FadeAnimation {
            target: labelText
        }
    }

    contentItem: Text {
    }

    background: Item {
        RectangularGlow {
            glowRadius: 0.001
            spread: 0.2
            color: "black"

            visible: true

            cornerRadius: background.radius
            anchors.fill: background
            scale: 0.75
            opacity: Math.pow( control.opacity, 100 )
        }

        Rectangle {
            id: background
            implicitWidth: 100
            implicitHeight: 100
            color: control.down ? Qt.darker(control.backgroundColor, 1.2) : control.backgroundColor
            radius: size / 2

            readonly property real size: Math.min(control.width, control.height)
            width: size
            height: size
            anchors.fill: parent

            Behavior on color {
                ColorAnimation {
                    duration: 200
                }
            }

            Canvas {
                id: canvas
                anchors.fill: parent

                Connections {
                    target: control
                    onProgressChanged: canvas.requestPaint()
                    onOldStartProgressChanged: canvas.requestPaint()
                }

                onPaint: {
                    var progress
                    var showHoldProgress = ((control.oldStartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated)

                    if(showHoldProgress)
                        progress = control.progress
                    else
                        progress = control.oldStartProgress < 0 ? 0:1-control.oldStartProgress


                    var ctx = getContext("2d")
                    ctx.clearRect(0, 0, width, height)
                    ctx.strokeStyle = showHoldProgress ? appTheme.theme.colors.error:"grey"
                    ctx.lineWidth = parent.width * 0.02
                    ctx.beginPath()
                    var startAngle = Math.PI * 1.5
                    var endAngle = startAngle + progress * Math.PI * 2
                    ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
                    ctx.stroke()
                }
            }
        }
    }
}