Qml控件之Spin加载中

import QtQuick 2.0 // Qt4 版本改为：import QtQuick 1.0

Rectangle {
    id: root
    width: 320
    height: 240

    Grid {
        anchors.centerIn: parent
        rows: 2
        columns: 2
        spacing: 80

        Spin { } // defualt
        Spin { color: "#a9cf6c" }
        Spin { color: "#fde498" }
        Spin { color: "#4169E1" }
    }
}

/*
 * Author: Qt君
 * WebSite: qthub.com
 * Email: 2088201923@qq.com
 * QQ交流群: 732271126
 * 关注微信公众号: [Qt君] 第一时间获取最新推送.
 * 代码仅用于学习使用，请勿用于商业途径.
 */
import QtQuick 2.0 // Qt4 版本改为：import QtQuick 1.0

FocusScope {
    id: root
    property color color: "#2f9bff"
    width: 40
    height: width

    Grid {
        id: grid
        anchors.centerIn: parent
        rows: 2
        columns: 2
        spacing: root.width * 0.2
        
        Repeater {
            model: [
                Qt.darker(color, 1.0),
                Qt.darker(color, 0.95),
                Qt.darker(color, 0.90),
                Qt.darker(color, 0.85),
                ]
            Rectangle {
                width: root.width * 0.3
                height: width
                color: modelData
                radius: width/2
            }
        }
    }
    
    Item {
        anchors.top: parent.bottom
        anchors.topMargin: 10
        width: root.width
        height: root.height * 0.3
        Text {
            anchors.centerIn: parent
            text: "loading..."
            font.pixelSize: 15
        }   
    }

    NumberAnimation {
        target: grid
        running: true
        property: "rotation"
        loops: Animation.Infinite
        from: 0
        to: 360
        duration: 1000
    }
}