Qml圆形进度按钮

首先从方形到圆形的转变只需要更改Rectangle的radius值就行了
转变成圆形后就可以出现圆形进度条

Rectangle{
        property int btnHeight: 48
        property int btnWidth: 120

        id: cProBtn
        height: btnHeight
        width: btnWidth
        anchors.centerIn: parent
        border.color: "#148014"
        border.width: 2
        radius: 0
        Text{
            id: cText
            anchors.centerIn: parent
            font.family: "microsoft yahei"
            font.pixelSize: 14
            text: qsTr("开始")
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                if (rAniStart.running || rAniStop.running) return
                cText.visible = false;
                rAniStart.start();
                widthAniStart.start();
            }
        }
        PropertyAnimation{
            id: rAniStart
            target: cProBtn
            property: "radius"
            duration: 300
            from: 0
            to: cProBtn.btnHeight/2
            onStopped: {
                cProgress.onStart();
                cProgress.visible = true;
            }
        }
        PropertyAnimation{
            id: widthAniStart
            target: cProBtn
            property: "width"
            duration: 300
            from: cProBtn.btnWidth
            to: cProBtn.btnHeight
        }
        QmlCircularProgress{
            id: cProgress
            anchors.centerIn: parent
            visible: false
            arcWidth: 2
            radius: cProBtn.btnHeight/2
            interval: 2
            arcColor: "#148014"
            onSStop: {
                visible = false;
                rAniStop.start();
                widthAniStop.start();
            }
        }
        PropertyAnimation{
            id: rAniStop
            target: cProBtn
            property: "radius"
            duration: 300
            from: cProBtn.btnHeight/2
            to: 0
            onStopped: {
                cText.text = qsTr("完成");
                cText.visible = true;
            }
        }
        PropertyAnimation{
            id: widthAniStop
            target: cProBtn
            property: "width"
            duration: 300
            from: cProBtn.btnHeight
            to: cProBtn.btnWidth
        }
    }

show.gif

需要完整代码请访问QtQuickExamples