Simple QML Progress Bar

English Български

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 ;-) )

This progress bar is used along with the BusyIndicator in the ProgressSpinner QML component to produce a nice QML component that can show activity and progress for long operations.

Implementation (SimpleProgressBar.qml):

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

Usage:

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