matrixion/resources/qml/ui/Spinner.qml

156 lines
3.9 KiB
QML
Raw Permalink Normal View History

// SPDX-FileCopyrightText: Nheko Contributors
2021-03-12 07:09:57 +03:00
//
// SPDX-License-Identifier: GPL-3.0-or-later
2021-07-09 05:39:27 +03:00
import "./animations"
2023-06-02 01:43:38 +03:00
import QtQuick
import QtQuick.Effects
2021-07-09 05:39:27 +03:00
2021-03-12 07:09:57 +03:00
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]
2021-07-09 05:39:27 +03:00
readonly property int pauseDuration: barCount * 150
readonly property int glowDuration: 300
2021-03-12 07:09:57 +03:00
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"
}
2021-07-09 05:39:27 +03:00
BlinkAnimation {
2021-03-12 07:09:57 +03:00
id: anim1
2021-07-10 18:21:15 +03:00
2021-07-09 05:39:27 +03:00
target: rect1
2021-07-10 18:21:15 +03:00
running: spinner.running
2021-07-09 05:39:27 +03:00
pauseDuration: spinner.pauseDuration
glowDuration: spinner.glowDuration
2021-07-10 18:21:15 +03:00
offset: 0 / spinner.barCount
2021-03-12 07:09:57 +03:00
}
2021-07-09 05:39:27 +03:00
BlinkAnimation {
2021-03-12 07:09:57 +03:00
id: anim2
2021-07-10 18:21:15 +03:00
2021-07-09 05:39:27 +03:00
target: rect2
2021-07-10 18:21:15 +03:00
running: spinner.running
2021-07-09 05:39:27 +03:00
pauseDuration: spinner.pauseDuration
glowDuration: spinner.glowDuration
2021-07-10 18:21:15 +03:00
offset: 1 / spinner.barCount
2021-03-12 07:09:57 +03:00
}
2021-07-09 05:39:27 +03:00
BlinkAnimation {
2021-03-12 07:09:57 +03:00
id: anim3
2021-07-10 18:21:15 +03:00
2021-07-09 05:39:27 +03:00
target: rect3
2021-07-10 18:21:15 +03:00
running: spinner.running
2021-07-09 05:39:27 +03:00
pauseDuration: spinner.pauseDuration
glowDuration: spinner.glowDuration
2021-07-10 18:21:15 +03:00
offset: 2 / spinner.barCount
2021-03-12 07:09:57 +03:00
}
2021-07-09 05:39:27 +03:00
BlinkAnimation {
2021-03-12 07:09:57 +03:00
id: anim4
2021-07-10 18:21:15 +03:00
2021-07-09 05:39:27 +03:00
target: rect4
2021-07-10 18:21:15 +03:00
running: spinner.running
2021-07-09 05:39:27 +03:00
pauseDuration: spinner.pauseDuration
glowDuration: spinner.glowDuration
2021-07-10 18:21:15 +03:00
offset: 3 / spinner.barCount
2021-03-12 07:09:57 +03:00
}
2021-07-09 05:39:27 +03:00
BlinkAnimation {
2021-03-12 07:09:57 +03:00
id: anim5
2021-07-10 18:21:15 +03:00
2021-07-09 05:39:27 +03:00
target: rect5
2021-07-10 18:21:15 +03:00
running: spinner.running
2021-07-09 05:39:27 +03:00
pauseDuration: spinner.pauseDuration
glowDuration: spinner.glowDuration
2021-07-10 18:21:15 +03:00
offset: 4 / spinner.barCount
2021-03-12 07:09:57 +03:00
}
2021-07-09 05:39:27 +03:00
BlinkAnimation {
2021-03-12 07:09:57 +03:00
id: anim6
2021-07-10 18:21:15 +03:00
2021-07-09 05:39:27 +03:00
target: rect6
2021-07-10 18:21:15 +03:00
running: spinner.running
2021-07-09 05:39:27 +03:00
pauseDuration: spinner.pauseDuration
glowDuration: spinner.glowDuration
2021-07-10 18:21:15 +03:00
offset: 5 / spinner.barCount
2021-03-12 07:09:57 +03:00
}
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)
}
}
2023-06-02 01:43:38 +03:00
MultiEffect {
2021-03-12 07:09:57 +03:00
anchors.fill: row
2023-06-02 01:43:38 +03:00
shadowBlur: 14
shadowEnabled: true
shadowColor: spinner.foreground
2021-03-12 07:09:57 +03:00
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)
}
}
}