Creating QML Controls From Scratch: ProgressBar

By Chris Cortopassi


In this installment of our QML Controls from Scratch series we'll implement a ProgressBar, which is often used to indicate the progress of a long-running operation from 0 to 100%. ProgressBar is a read-only control so it's pretty simple, save for the math required to compute its width. ProgressBar is implemented with only two Rectangles. Its public properties are minimum, value, and maximum.


import QtQuick 2.0

Rectangle { // background
    id: root

// public
    property double maximum: 10
    property double value:   0
    property double minimum: 0

// private
    width: 500;  height: 100 // default size

    border.width: 0.05 * root.height
    radius: 0.5 * height
    Rectangle { // foreground
        visible: value > minimum
        x: 0.1 * root.height;  y: 0.1 * root.height
        width: Math.max(height, 
               Math.min((value - minimum) / (maximum - minimum) * (parent.width - 0.2 * root.height), 
                        parent.width - 0.2 * root.height)) // clip
        height: 0.8 * root.height
        color: 'black'
        radius: parent.radius


import QtQuick 2.0

ProgressBar {
    maximum:  10
    value:     0
    minimum: -10


Hopefully, you found this information on ProgressBars helpful, as they are used frequently in a variety of applications. In the next installment, we'll create a Spinner. The source code can be downloaded here. For a complete list of all the controls in this series, read Here's How to Create QML Controls for Embedded and Mobile Projects. Be sure to check out my webinar on-demand. I walk you through all 17 QML controls with code examples.