Simple QML Progress Bar

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 very simple QML progress bar takes some inspiration from 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
bottom: parent.bottom
margins: 2
color: parent.color



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