matrixion/resources/qml/ui/Spinner.qml

// SPDX-FileCopyrightText: 2021 Nheko Contributors
//
// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick 2.12
import QtGraphicalEffects 1.12

Item {
    id: spinner

    property int spacing: 0
    property bool running: true
    property var foreground: "#333"
    readonly property int barCount: 6
    readonly property real a: Math.PI / 6
    readonly property var colors: ["#c0def5", "#87aade", "white"]
    readonly property var anims: [anim1, anim2, anim3, anim4, anim5, anim6]

    height: 40
    width: barCount * (height * 0.375)

    Row {
        id: row

        Rectangle {
            id: rect1

            width: ((spinner.width / spinner.barCount) - (spinner.spacing)) * 1.5
            height: spinner.height / 3.5
            color: "white"
        }

        Rectangle {
            id: rect2

            width: (spinner.width / spinner.barCount) - spinner.spacing
            height: spinner.height
            color: spinner.colors[0]
        }

        Rectangle {
            id: rect3

            width: (spinner.width / spinner.barCount) - spinner.spacing
            height: spinner.height
            color: spinner.colors[1]
        }

        Rectangle {
            id: rect4

            width: (spinner.width / spinner.barCount) - spinner.spacing
            height: spinner.height
            color: spinner.colors[2]
        }

        Rectangle {
            id: rect5

            width: (spinner.width / (spinner.barCount + 1)) - spinner.spacing
            height: spinner.height / 3.5
            color: "white"
        }

        Rectangle {
            id: rect6

            width: (spinner.width / spinner.barCount) - spinner.spacing
            height: spinner.height
            color: "white"
        }

        SequentialAnimation {
            id: anim1

            loops: Animation.Infinite

            NumberAnimation {
                target: rect1
                property: "opacity"
                from: 0
                to: 1
                duration: 300
            }

            PauseAnimation {
                duration: spinner.barCount * 150
            }

        }

        SequentialAnimation {
            id: anim2

            loops: Animation.Infinite

            NumberAnimation {
                target: rect2
                property: "opacity"
                from: 0
                to: 1
                duration: 300
            }

            PauseAnimation {
                duration: spinner.barCount * 150
            }

        }

        SequentialAnimation {
            id: anim3

            loops: Animation.Infinite

            NumberAnimation {
                target: rect3
                property: "opacity"
                from: 0
                to: 1
                duration: 300
            }

            PauseAnimation {
                duration: spinner.barCount * 150
            }

        }

        SequentialAnimation {
            id: anim4

            loops: Animation.Infinite

            NumberAnimation {
                target: rect4
                property: "opacity"
                from: 0
                to: 1
                duration: 300
            }

            PauseAnimation {
                duration: spinner.barCount * 150
            }

        }

        SequentialAnimation {
            id: anim5

            loops: Animation.Infinite

            NumberAnimation {
                target: rect5
                property: "opacity"
                from: 0
                to: 1
                duration: 300
            }

            PauseAnimation {
                duration: spinner.barCount * 150
            }

        }

        SequentialAnimation {
            id: anim6

            loops: Animation.Infinite

            NumberAnimation {
                target: rect6
                property: "opacity"
                from: 0
                to: 1
                duration: 300
            }

            PauseAnimation {
                duration: spinner.barCount * 150
            }

        }

        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(Math.cos(spinner.a), -Math.sin(spinner.a), 0, 0, 0, Math.cos(spinner.a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

    }

    Timer {
        // ----- Private Properties ----- //
        property int _barIndex: 0

        interval: 80
        repeat: true
        running: spinner.running
        onTriggered: {
            if (_barIndex === spinner.barCount) {
                _barIndex = 0;
                stop();
            } else {
                anims[_barIndex].start();
                _barIndex++;
            }
        }
        Component.onCompleted: start()
    }

    Glow {
        anchors.fill: row
        radius: 14
        samples: 17
        color: spinner.foreground
        source: row

        transform: Matrix4x4 {
            matrix: Qt.matrix4x4(Math.cos(spinner.a), -Math.sin(spinner.a), 0, 0, 0, Math.cos(spinner.a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
        }

    }

}