Creating QML Controls From Scratch: ProgressBar

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.

ProgressBar.qml

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

Test.qml

import QtQuick 2.0

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

Summary

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.