ProgressIndicator.qml

import QtQml 2.2
import QtQuick 2.0
import QtLocation 5.3

MapQuickItem {
    id: root

    width: 20
    height: 20
    anchorPoint.x: width/2
    anchorPoint.y: height/2

    property color primaryColor: "orange"
    property color secondaryColor: "lightblue"

    property real centerWidth: width / 2
    property real centerHeight: height / 2
    property real radius: Math.min(canvas.width, canvas.height) / 2

    property real minimumValue: 0
    property real maximumValue: 100
    property real currentValue: 33

    // this is the angle that splits the circle in two arcs
    // first arc is drawn from 0 radians to angle radians
    // second arc is angle radians to 2*PI radians
    property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI

    // we want both circle to start / end at 12 o'clock
    // without this offset we would start / end at 9 o'clock
    property real angleOffset: -Math.PI / 2

    property string text: ""

    signal clicked()

    onPrimaryColorChanged: canvas.requestPaint()
    onSecondaryColorChanged: canvas.requestPaint()
    onMinimumValueChanged: canvas.requestPaint()
    onMaximumValueChanged: canvas.requestPaint()
    onCurrentValueChanged: canvas.requestPaint()

    // draws two arcs (portion of a circle)
    // fills the circle with a lighter secondary color
    // when pressed
    sourceItem: Canvas {
        id: canvas
        width: root.width
        height: root.height
        antialiasing: true

        onPaint: {
            var ctx = getContext("2d");
            ctx.save();

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // fills the mouse area when pressed
            // the fill color is a lighter version of the
            // secondary color

            if (mouseArea.pressed) {
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.fillStyle = Qt.lighter(root.secondaryColor, 1.25);
                ctx.arc(root.centerWidth,
                        root.centerHeight,
                        root.radius,
                        0,
                        2*Math.PI);
                ctx.fill();
            }

            // First, thinner arc
            // From angle to 2*PI

            ctx.beginPath();
            ctx.lineWidth = 1;
            ctx.strokeStyle = primaryColor;
            ctx.arc(root.centerWidth,
                    root.centerHeight,
                    root.radius,
                    angleOffset + root.angle,
                    angleOffset + 2*Math.PI);
            ctx.stroke();


            // Second, thicker arc
            // From 0 to angle

            ctx.beginPath();
            ctx.lineWidth = 3;
            ctx.strokeStyle = root.secondaryColor;
            ctx.arc(root.centerWidth,
                    root.centerHeight,
                    root.radius,
                    root.angleOffset,
                    root.angleOffset + root.angle);
            ctx.stroke();

            ctx.restore();
        }

        Text {
            anchors.centerIn: parent

            text: root.text
            color: root.primaryColor
        }

        MouseArea {
            id: mouseArea

            anchors.fill: parent
            onClicked: root.clicked()
            onPressedChanged: canvas.requestPaint()
        }
    }
}