Table of Content

Progress Spinner

This snippet article shows how to make a nice little progress bar/activity spinner in QML. In builds upon the Busy Indicator [developer.qt.nokia.com] and Simple Progress Bar [developer.qt.nokia.com] 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):

Progress Spinner

Implementation

  1. import QtQuick 1.0
  2. import ZapBsComponents 1.0
  3.  
  4. Item {
  5.     id: progressSpinner
  6.     property alias minimum: progress.minimum
  7.     property alias maximum: progress.maximum
  8.     property alias value: progress.value
  9.     property alias progressWidth: progress.width
  10.     property alias progressHeight: progress.height
  11.     property color color: "#77B753"
  12.  
  13.     BusyIndicator {
  14.         id: busyIndicator
  15.         anchors.fill: parent
  16.         foregroundColor: progressSpinner.color
  17.         opacity: ( value == maximum ) ? 0.0 : 1.0
  18.         Behavior on opacity {
  19.             NumberAnimation {
  20.                 duration: 100
  21.             }
  22.         }
  23.  
  24.         RotationAnimation
  25.         {
  26.             target: busyIndicator
  27.             property: "rotation" // Suppress a warning
  28.             from: 0
  29.             to: 360
  30.             direction: RotationAnimation.Clockwise
  31.             duration: 1000
  32.             loops: Animation.Infinite
  33.             running: progress.value < progress.maximum
  34.         }
  35.     }
  36.  
  37.     SimpleProgressBar {
  38.         id: progress
  39.         anchors.centerIn: progressSpinner
  40.         width: 2 * busyIndicator.actualInnerRadius - 12
  41.         height: 12
  42.         color: progressSpinner.color
  43.         opacity: ( value == minimum || value == maximum ) ? 0.0 : 1.0
  44.         Behavior on opacity {
  45.             NumberAnimation {
  46.                 duration: 300
  47.             }
  48.         }
  49.  
  50.         value: 35
  51.     }
  52. }

Usage

This little snippet demonstrates the fade in/out animations of the ProgressSpinner.—

  1. import QtQuick 1.0
  2.  
  3. Rectangle {
  4.     id: root
  5.     width: 640
  6.     height: 360
  7.  
  8.     ProgressSpinner {
  9.         id: progress
  10.         x: 10
  11.         y: 10
  12.         width: 100
  13.         height: 100
  14.  
  15.         SequentialAnimation on value {
  16.             PauseAnimation { duration: 500 }
  17.             NumberAnimation { duration: 1500; from: 0; to: 100; }
  18.             PauseAnimation { duration: 500 }
  19.             loops: Animation.Infinite
  20.         }
  21.     }
  22. }

Categories:

  • HowTo
  • snippets
    • Creative Commons Attribution-ShareAlike 2.5 Generic

    Content is available under

    Creative Commons Attribution-ShareAlike 2.5 Generic

     

    © 2011 Qt Project Hosting. Qt® and the Qt logo is a registered trade mark of Nokia Corporation and/or its subsidiaries and is used pursuant to a license from Nokia Corporation and/or its subsidiaries.
    All other trademarks are property of their respective owners. Privacy Policy
    This site is hosted by Gitorious AS. Your use of this web site is governed by these terms of service.

    Qt Project Hosting, P.O. Box 4332 Nydalen, 0402 Oslo, Norway. Phone: +47 21 60 27 32. Org. Nr. 997 447 913