Creating QML Controls From Scratch: Spinner

By Chris Cortopassi


Continuing our QML Controls from Scratch series, this time we will implement a Spinner, also known as a busy indicator. Spinner indicates the progress of a long-running operation when the progress percentage is unknown. (For known percentages, we'd use a ProgressBar.) Spinner uses a Timer to animate rotation. Normally, a designer would provide us with a .png asset to rotate an Image, but for this example we rotate an array of circles, implemented with Rectangle. Spinner has no public properties.


import QtQuick 2.0

Item {
    id: root
// public
// private
    width: 500;  height: 100 // default size
    Item { // square
        id: square
        anchors.centerIn: parent
        property double minimum: Math.min(root.width, root.height)
        width: minimum;  height: minimum
        Repeater {
            id: repeater
            model: 8
            delegate: Rectangle{
                color: 'black'
                property double b: 0.1
                property double a: 0.25
                width: ((b - a) / repeater.count * index + a) * square.height;  height: width
                radius: 0.5 * height
                x: 0.5 * square.width  + 0.5 * (square.width  - width )  * Math.cos(2 * Math.PI / repeater.count * index) - 0.5 * width
                y: 0.5 * square.height - 0.5 * (square.height - height)  * Math.sin(2 * Math.PI / repeater.count * index) - 0.5 * height
    Timer {
        interval: 10
        running: true
        repeat:  true
        onTriggered: square.rotation += 2 // degrees



import QtQuick 2.0




In this post, we created a Spinner. Use it to show progress of a long-running operation in cases where you don't know the  progress percentage. In the next blog, we'll create a Dialog. The source code can be downloaded here. Be sure to check out my webinar on-demand. I walk you through all 17 QML controls with code examples.  

Have a question or want to add to the conversation?

You must be logged in to continue.

Log in Register