Qt wiki will be updated on October 12th 2023 starting at 11:30 AM (EEST) and the maintenance will last around 2-3 hours. During the maintenance the site will be unavailable.
QML Progress Spinner: Difference between revisions
Jump to navigation
Jump to search
AutoSpider (talk | contribs) (Add "cleanup" tag) |
(Sub-categorize) |
||
| (2 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{ | {{LangSwitch}} | ||
[[Category:Snippets::QML]] | |||
[[Category:Snippets]] | |||
[[Category:HowTo]] | [[Category:HowTo]] | ||
[[Category:Developing_with_Qt::Qt Quick::QML]] | [[Category:Developing_with_Qt::Qt Quick::QML]] | ||
This snippet article shows how to make a nice little progress bar/activity spinner in QML. In builds upon the [[Busy-Indicator-for-QML]] and [[Simple QML Progress Bar]] components and adds some nice little animations. | |||
This snippet article shows how to make a nice little progress bar/activity spinner in QML. In builds upon the | |||
This Progress Spinner component is very easy to embed into your new and existing QML components. This is what it looks like (without the animations of course): | This Progress Spinner component is very easy to embed into your new and existing QML components. This is what it looks like (without the animations of course): | ||
http://gallery.theharmers.co.uk/upload/2011/04/30/20110430162403-9ceb77f1.png | |||
= Implementation = | = Implementation = | ||
| Line 100: | Line 94: | ||
} | } | ||
} | } | ||
</code> | |||
Latest revision as of 13:06, 28 November 2016
En Ar Bg De El Es Fa Fi Fr Hi Hu It Ja Kn Ko Ms Nl Pl Pt Ru Sq Th Tr Uk Zh
This snippet article shows how to make a nice little progress bar/activity spinner in QML. In builds upon the Busy-Indicator-for-QML and Simple QML Progress Bar components and adds some nice little animations.
This Progress Spinner component is very easy to embed into your new and existing QML components. This is what it looks like (without the animations of course):
Implementation
import QtQuick 1.0
import ZapBsComponents 1.0
Item {
id: progressSpinner
property alias minimum: progress.minimum
property alias maximum: progress.maximum
property alias value: progress.value
property alias progressWidth: progress.width
property alias progressHeight: progress.height
property color color: "#77B753"
BusyIndicator {
id: busyIndicator
anchors.fill: parent
foregroundColor: progressSpinner.color
opacity: ( value == maximum ) ? 0.0 : 1.0
Behavior on opacity {
NumberAnimation {
duration: 100
}
}
RotationAnimation
{
target: busyIndicator
property: "rotation" // Suppress a warning
from: 0
to: 360
direction: RotationAnimation.Clockwise
duration: 1000
loops: Animation.Infinite
running: progress.value < progress.maximum
}
}
SimpleProgressBar {
id: progress
anchors.centerIn: progressSpinner
width: 2 * busyIndicator.actualInnerRadius - 12
height: 12
color: progressSpinner.color
opacity: ( value minimum || value maximum ) ? 0.0 : 1.0
Behavior on opacity {
NumberAnimation {
duration: 300
}
}
value: 35
}
}
Usage
This little snippet demonstrates the fade in/out animations of the ProgressSpinner.—
import QtQuick 1.0
Rectangle {
id: root
width: 640
height: 360
ProgressSpinner {
id: progress
x: 10
y: 10
width: 100
height: 100
SequentialAnimation on value {
PauseAnimation { duration: 500 }
NumberAnimation { duration: 1500; from: 0; to: 100; }
PauseAnimation { duration: 500 }
loops: Animation.Infinite
}
}
}