Spinner.qml

import QtQuick 2.1

Item {
    id: root
    property color color
    width: 64; height: 64

    Canvas {
        id: canvas
        property point center: Qt.point(width / 2, height / 2)
        property real r1: Math.min(width / 2 - r2, height / 2 - r2)
        property real r2: Math.min(width, height) / 7.75
        property real progress: 0
        anchors { fill: parent }
        onPaint: {
            var n = 7
            var nth = 1 / n
            var ctx = getContext('2d')
            ctx.reset()
            ctx.fillStyle = root.color
            ctx.translate(center.x, center.y)
            for (var it = 0; it < n; ++it) {
                var angle = it * Math.PI / n * 2 - Math.PI / 2
                var k = (it / n + (1 - progress)) % 1
                if (k > nth) {
                    ctx.globalAlpha = k
                } else {
                    k = 1 - k * n
                    ctx.globalAlpha = 1
                }
                ctx.beginPath()
                ctx.arc(r1 * Math.cos(angle), r1 * Math.sin(angle),  k * r2, 0, Math.PI * 2)
                ctx.fill()
            }
        }
    }

    Timer {
        onTriggered: {
            canvas.progress = (canvas.progress + 0.025) % 1
            canvas.requestPaint()
        }
        interval: 1000/10
        repeat: true
        running: root.visible
    }
}