QML Progress Spinner: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
[[Category:Snippets]]<br />[[Category:HowTo]]<br />[[Category:Developing_with_Qt::Qt Quick]]<br />[[Category:Developing_with_Qt::Qt Quick::QML]] | |||
[toc align_right="yes&quot; depth="2&quot;] | |||
= Progress Spinner = | |||
This snippet article shows how to make a nice little progress bar/activity spinner in QML. In builds upon the "Busy Indicator&quot;:http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML and "Simple Progress Bar&quot;:http://developer.qt.nokia.com/wiki/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): | |||
=Usage= | [[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430162403-9ceb77f1.png|Progress Spinner]] | ||
= Implementation = | |||
<code><br />import QtQuick 1.0<br />import ZapBsComponents 1.0 | |||
Item {<br /> id: progressSpinner<br /> property alias minimum: progress.minimum<br /> property alias maximum: progress.maximum<br /> property alias value: progress.value<br /> property alias progressWidth: progress.width<br /> property alias progressHeight: progress.height<br /> property color color: "#77B753&quot; | |||
BusyIndicator {<br /> id: busyIndicator<br /> anchors.fill: parent<br /> foregroundColor: progressSpinner.color<br /> opacity: ( value == maximum ) ? 0.0 : 1.0<br /> Behavior on opacity {<br /> NumberAnimation {<br /> duration: 100<br /> }<br /> } | |||
RotationAnimation<br /> {<br /> target: busyIndicator<br /> property: "rotation&quot; // Suppress a warning<br /> from: 0<br /> to: 360<br /> direction: RotationAnimation.Clockwise<br /> duration: 1000<br /> loops: Animation.Infinite<br /> running: progress.value < progress.maximum<br /> }<br /> } | |||
SimpleProgressBar {<br /> id: progress<br /> anchors.centerIn: progressSpinner<br /> width: 2 * busyIndicator.actualInnerRadius - 12<br /> height: 12<br /> color: progressSpinner.color<br /> opacity: ( value minimum || value maximum ) ? 0.0 : 1.0<br /> Behavior on opacity {<br /> NumberAnimation {<br /> duration: 300<br /> }<br /> } | |||
value: 35<br /> }<br />}<br /></code> | |||
= Usage = | |||
This little snippet demonstrates the fade in/out animations of the ProgressSpinner.— | This little snippet demonstrates the fade in/out animations of the ProgressSpinner.— | ||
<code><br />import QtQuick 1.0 | |||
Rectangle {<br /> id: root<br /> width: 640<br /> height: 360 | |||
ProgressSpinner {<br /> id: progress<br /> x: 10<br /> y: 10<br /> width: 100<br /> height: 100 | |||
SequentialAnimation on value {<br /> PauseAnimation { duration: 500 }<br /> NumberAnimation { duration: 1500; from: 0; to: 100; }<br /> PauseAnimation { duration: 500 }<br /> loops: Animation.Infinite<br /> }<br /> }<br />} | |||
Revision as of 08:55, 24 February 2015
[toc align_right="yes" depth="2"]
Progress Spinner
This snippet article shows how to make a nice little progress bar/activity spinner in QML. In builds upon the "Busy Indicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML and "Simple Progress Bar":http://developer.qt.nokia.com/wiki/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
<br />import QtQuick 1.0<br />import ZapBsComponents 1.0
Item {<br /> id: progressSpinner<br /> property alias minimum: progress.minimum<br /> property alias maximum: progress.maximum<br /> property alias value: progress.value<br /> property alias progressWidth: progress.width<br /> property alias progressHeight: progress.height<br /> property color color: "#77B753&quot;
BusyIndicator {<br /> id: busyIndicator<br /> anchors.fill: parent<br /> foregroundColor: progressSpinner.color<br /> opacity: ( value == maximum ) ? 0.0 : 1.0<br /> Behavior on opacity {<br /> NumberAnimation {<br /> duration: 100<br /> }<br /> }
RotationAnimation<br /> {<br /> target: busyIndicator<br /> property: "rotation&quot; // Suppress a warning<br /> from: 0<br /> to: 360<br /> direction: RotationAnimation.Clockwise<br /> duration: 1000<br /> loops: Animation.Infinite<br /> running: progress.value < progress.maximum<br /> }<br /> }
SimpleProgressBar {<br /> id: progress<br /> anchors.centerIn: progressSpinner<br /> width: 2 * busyIndicator.actualInnerRadius - 12<br /> height: 12<br /> color: progressSpinner.color<br /> opacity: ( value minimum || value maximum ) ? 0.0 : 1.0<br /> Behavior on opacity {<br /> NumberAnimation {<br /> duration: 300<br /> }<br /> }
value: 35<br /> }<br />}<br />
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
}
}
}