QML Progress Spinner

From Qt Wiki
Jump to: navigation, search

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

}