a custom loading indicator
This commit is contained in:
parent
2428792895
commit
402bc08d52
2 changed files with 20 additions and 29 deletions
|
@ -8,7 +8,7 @@ import "./" as Presenter
|
||||||
Controls.BusyIndicator {
|
Controls.BusyIndicator {
|
||||||
id: root
|
id: root
|
||||||
property color color
|
property color color
|
||||||
visible: true
|
visible: root.running
|
||||||
|
|
||||||
contentItem: Item {
|
contentItem: Item {
|
||||||
implicitWidth: 64
|
implicitWidth: 64
|
||||||
|
@ -30,7 +30,7 @@ Controls.BusyIndicator {
|
||||||
|
|
||||||
Repeater {
|
Repeater {
|
||||||
id: repeater
|
id: repeater
|
||||||
model: 1
|
model: 4
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
id: delegate
|
id: delegate
|
||||||
|
@ -38,41 +38,32 @@ Controls.BusyIndicator {
|
||||||
|
|
||||||
x: item.width / 2 - width / 2
|
x: item.width / 2 - width / 2
|
||||||
y: item.height / 2 - height / 2
|
y: item.height / 2 - height / 2
|
||||||
implicitWidth: root.width
|
height: width
|
||||||
implicitHeight: root.width
|
|
||||||
radius: 500
|
radius: 500
|
||||||
color: root.color
|
color: root.color
|
||||||
opacity: delegate.scale
|
|
||||||
/* visible: root.visible */
|
|
||||||
|
|
||||||
/* Text { */
|
|
||||||
/* text: delegate.scale + " & " + delegate.opacity */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
PropertyAnimation {
|
PropertyAnimation {
|
||||||
target: delegate
|
target: delegate
|
||||||
property: "scale"
|
property: "width"
|
||||||
running: root.visible && root.running
|
running: root.running
|
||||||
from: 0
|
from: 0 - (index * 100)
|
||||||
to: 1
|
to: root.width * 1.8
|
||||||
loops: Animation.Infinite
|
loops: Animation.Infinite
|
||||||
duration: 500 * index
|
duration: 1400
|
||||||
easing.type: Easing.OutInExpo
|
easing.type: Easing.InSine
|
||||||
easing.amplitude: 2.0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* transform: [ */
|
PropertyAnimation {
|
||||||
/* Translate { */
|
target: delegate
|
||||||
/* y: -Math.min(item.width, item.height) * 0.5 */
|
property: "opacity"
|
||||||
/* x: index */
|
running: root.running
|
||||||
/* }, */
|
from: 1
|
||||||
/* Rotation { */
|
to: 0
|
||||||
/* angle: delegate.index / repeater.count * 360 */
|
loops: Animation.Infinite
|
||||||
/* origin.x: 5 */
|
duration: 1400
|
||||||
/* origin.y: 5 */
|
easing.type: Easing.InSine
|
||||||
/* } */
|
}
|
||||||
/* ] */
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -45,7 +45,7 @@ Item {
|
||||||
Presenter.LoadingSpinner {
|
Presenter.LoadingSpinner {
|
||||||
id: loadingSpinner
|
id: loadingSpinner
|
||||||
color: Kirigami.Theme.highlightColor
|
color: Kirigami.Theme.highlightColor
|
||||||
running: true
|
running: itemType === "video" && imageSource.length() < 1
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue