151 lines
5.4 KiB
QML
151 lines
5.4 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Controls.Material 2.15
|
|
import QtQuick.Layouts 1.15
|
|
import "../Theme" as Theme
|
|
|
|
Item {
|
|
id: root
|
|
Layout.fillWidth: true
|
|
Layout.minimumHeight: 40
|
|
visible: value > 0 || text !== ""
|
|
|
|
property alias value: progressBar.value
|
|
property alias text: speedLabel.text
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
spacing: Theme.Theme.spacing
|
|
|
|
ProgressBar {
|
|
id: progressBar
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 14
|
|
from: 0
|
|
to: 1.0
|
|
|
|
background: Rectangle {
|
|
implicitWidth: 200
|
|
implicitHeight: 14
|
|
color: "#0A0A0A"
|
|
radius: 2
|
|
border.width: 1
|
|
border.color: "#2A4055"
|
|
clip: true
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: parent.radius
|
|
color: "#152536"
|
|
visible: progressBar.value > 0 && progressBar.value < 1
|
|
clip: true
|
|
|
|
Rectangle {
|
|
id: animatedBackground
|
|
width: parent.width
|
|
height: parent.height
|
|
color: "#1E3346"
|
|
radius: parent.radius
|
|
|
|
SequentialAnimation on opacity {
|
|
loops: Animation.Infinite
|
|
running: progressBar.value > 0 && progressBar.value < 1
|
|
NumberAnimation { to: 0.3; duration: 1000 }
|
|
NumberAnimation { to: 0.1; duration: 1000 }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
contentItem: Item {
|
|
implicitWidth: 200
|
|
implicitHeight: 14
|
|
clip: true
|
|
|
|
Rectangle {
|
|
width: progressBar.visualPosition * parent.width
|
|
height: parent.height
|
|
radius: 2
|
|
clip: true
|
|
|
|
gradient: Gradient {
|
|
GradientStop { position: 0.0; color: "#1E3346" }
|
|
GradientStop { position: 0.5; color: "#2B4869" }
|
|
GradientStop { position: 1.0; color: "#1E3346" }
|
|
}
|
|
|
|
Rectangle {
|
|
width: parent.width
|
|
height: 1
|
|
color: "#3A5570"
|
|
opacity: 0.7
|
|
}
|
|
|
|
Rectangle {
|
|
width: parent.width
|
|
height: parent.height
|
|
radius: parent.radius
|
|
gradient: Gradient {
|
|
GradientStop { position: 0.0; color: "#20FFFFFF" }
|
|
GradientStop { position: 0.5; color: "#40FFFFFF" }
|
|
GradientStop { position: 1.0; color: "#20FFFFFF" }
|
|
}
|
|
|
|
SequentialAnimation on opacity {
|
|
loops: Animation.Infinite
|
|
running: progressBar.value > 0 && progressBar.value < 1
|
|
NumberAnimation { to: 0.1; duration: 1000 }
|
|
NumberAnimation { to: 0.3; duration: 1000 }
|
|
}
|
|
}
|
|
|
|
Behavior on width {
|
|
NumberAnimation {
|
|
duration: 100
|
|
easing.type: Easing.OutQuad
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Theme.Theme.spacing
|
|
|
|
Label {
|
|
id: speedLabel
|
|
color: "#77A7D1"
|
|
font.pixelSize: Theme.Theme.smallSize
|
|
font.bold: true
|
|
visible: text !== ""
|
|
|
|
Behavior on text {
|
|
SequentialAnimation {
|
|
NumberAnimation { target: speedLabel; property: "opacity"; to: 0.7; duration: 100 }
|
|
PropertyAction { target: speedLabel; property: "text" }
|
|
NumberAnimation { target: speedLabel; property: "opacity"; to: 1.0; duration: 100 }
|
|
}
|
|
}
|
|
}
|
|
|
|
Label {
|
|
Layout.fillWidth: true
|
|
text: Math.round(progressBar.value * 100) + "%"
|
|
color: "#77A7D1"
|
|
font.pixelSize: Theme.Theme.smallSize
|
|
font.bold: true
|
|
horizontalAlignment: Text.AlignRight
|
|
visible: progressBar.value > 0
|
|
|
|
Behavior on text {
|
|
SequentialAnimation {
|
|
NumberAnimation { target: parent; property: "opacity"; to: 0.7; duration: 100 }
|
|
PropertyAction { target: parent; property: "text" }
|
|
NumberAnimation { target: parent; property: "opacity"; to: 1.0; duration: 100 }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |