QML | 实现一个转圈等待控件

项目中需要一个转圈等待，就自己实现了一个Rotatingwait，-----------------------后来发现QML有自带的一个等待指示器BusyIndicator(/ㄒoㄒ/)

//RotatingWait.qml
import QtQuick 2.7
import QtGraphicalEffects 1.0

Item {
    Rectangle {
        id: rect
        width: parent.width
        height: parent.height
        color: Qt.rgba(0, 0, 0, 0)
        radius: width / 2
        border.width: width / 6 //设置边框，看起来是一个圆环
        visible: false
    }
    //旋转的渐变色，效果是圆环外部看起来转动的颜色变化
    ConicalGradient {
       width: rect.width
       height: rect.height
       gradient: Gradient {
            GradientStop { position: 0.0; color: "#687698" }
            GradientStop { position: 1.0; color: "#37415F" }
       }
       source: rect //渐变色作用范围
       //边框中的一个圆形， 可以看成旋转的头部
       Rectangle {
           anchors.top: parent.top
           anchors.horizontalCenter: parent.horizontalCenter
           width: rect.border.width
           height: width
           radius: width / 2
           color: "#37415F"
       }

       RotationAnimation on rotation {
           from: 0
           to: 360
           duration: 1000 //旋转速度，默认250
           loops: Animation.Infinite //一直旋转
        }
    }
}

main.qml中使用 

//main.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtGraphicalEffects 1.0
Window {
    id: rootWindow
    visible: true
    width: 1920
    height: 1080
    title: qsTr("Roating wait...")
    //设置页面背景渐变色
    LinearGradient {
        anchors.fill: parent
        start: Qt.point(0, 0)
        end: Qt.point(width, 0)
        gradient:Gradient {
            GradientStop {position: 0.0; color: "#2C3753"}
            GradientStop {position: 1.0; color: "#1B2234"}
        }
    }
    //文本提示框
    Text {
        anchors{
            left: parent.left
            leftMargin: parent.width * 0.45
            top: parent.top
            topMargin: parent.height * 0.6
        }
        text: qsTr("正在加载，请稍后...")
        color: "#FFFFFF"
        font{
           pixelSize: 24
           bold: true
        }
    }
    //转圈等待
    RotatingWait {
        anchors.centerIn: parent
        width: rootWindow.width * 0.05
        height: width
    }

}

效果图(没有gif截图软件，静图将就看看，实际效果请自行脑补^_^)：