QML Progress Spinner: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Sub-categorize)
 
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Snippets]]
{{LangSwitch}}
[[Category:Snippets::QML]]
[[Category:HowTo]]
[[Category:HowTo]]
[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick::QML]]
[[Category:Developing_with_Qt::Qt Quick::QML]]


[toc align_right="yes" depth="2"]
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.
 
= 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):
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):


[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430162403-9ceb77f1.png|Progress Spinner]]
http://gallery.theharmers.co.uk/upload/2011/04/30/20110430162403-9ceb77f1.png


= Implementation =
= Implementation =
Line 98: 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):

20110430162403-9ceb77f1.png

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
 }
 }
}