View source for Simple QML Progress Bar

'''English''' [[Simple_QML_Progress_Bar_Bulgarian|Български]]

[[Category:Snippets]]
[[Category:HowTo]]
[[Category:Developing_with_Qt::Qt Quick]]
[[Category:Developing_with_Qt::Qt Quick::QML]]

= Simple Progress Bar =

This very simple QML progress bar takes some inspiration form the progress bars example that ships with Qt. I have modified it to be a very plain and lightweight progress bar that is suitable for use even at very small sizes. This is what it looks like by default (with the Qt green colour ;-) )

[[Image:http://gallery.theharmers.co.uk/upload/2011/04/30/20110430152206-b395a64a.png|Simple progress bar]]

This progress bar is used along with the "BusyIndicator":http://developer.qt.nokia.com/wiki/Busy_Indicator_for_QML in the ProgressSpinner QML component to produce a nice QML component that can show activity and progress for long operations.

Implementation (SimpleProgressBar.qml):
<code>
import QtQuick 1.0

Item {
 id: progressbar

 property int minimum: 0
 property int maximum: 100
 property int value: 0
 property color color: "#77B753"

 width: 250; height: 23
 clip: true

 Rectangle {
 id: border
 anchors.fill: parent
 anchors.bottomMargin: 1
 anchors.rightMargin: 1
 color: "transparent"
 border.width: 1
 border.color: parent.color
 }

 Rectangle {
 id: highlight
 property int widthDest: ( ( progressbar.width * ( value- minimum ) ) / ( maximum - minimum ) - 4 )
 width: highlight.widthDest

Behavior on width {
 SmoothedAnimation {
 velocity: 1200
 }
 }

anchors {
 left: parent.left
 top: parent.top
 bottom: parent.bottom
 margins: 2
 }
 color: parent.color
 }
}
</code>

Usage:

<code>
import QtQuick 1.0

Rectangle {
 id: root
 width: 640
 height: 360

SimpleProgressBar {
 id: progress
 anchors.centerIn: progressSpinner
 width: 100
 height: 12
 color: progressSpinner.color
 value: 35
 }
}