QML shares various BusyIndicator loading Loading...

Animation effects still need to study hard.

1. Various loading states...

The demo comes from https://github.com/Furkanzmc/QML-Loaders
csdn address: https://download.csdn.net/download/u011942101/85248536
The effect is as follows:

2. Circular progress bar

The effect is as follows:

code show as below

import QtQuick 2.9

Item {
    
    
    id: root

    property int size: 150
    property int lineWidth: 5
    property real value: 0

    property color primaryColor: "#29b6f6"
    property color secondaryColor: "#e0e0e0"

    property int animationDuration: 1000

    width: size
    height: size


    onValueChanged: {
    
    
        canvas.degree = value * 360;
    }


    Canvas {
    
    
        id: canvas

        property real degree: 0

        anchors.fill: parent
        antialiasing: true

        onDegreeChanged: {
    
    
            requestPaint();
        }

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

            var x = root.width/2;
            var y = root.height/2;

            var radius = root.size/2 - root.lineWidth
            var startAngle = (Math.PI/180) * 270;
            var fullAngle = (Math.PI/180) * (270 + 360);
            var progressAngle = (Math.PI/180) * (270 + degree);

            ctx.reset()

            ctx.lineCap = 'round';
            ctx.lineWidth = root.lineWidth;

            ctx.beginPath();
            ctx.arc(x, y, radius, startAngle, fullAngle);
            ctx.strokeStyle = root.secondaryColor;
            ctx.stroke();

            ctx.beginPath();
            ctx.arc(x, y, radius, startAngle, progressAngle);
            ctx.strokeStyle = root.primaryColor;
            ctx.stroke();
        }

        Behavior on degree {
    
    
            NumberAnimation {
    
    
                duration: root.animationDuration
            }
        }
    }
}

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    
    
    visible: true
    width: 1280
    height: 800
    title: qsTr("CircularProgressBar - Demo")

    Row {
    
    
        anchors.centerIn: parent
        spacing: 20

        CircularProgressBar {
    
    
            id: progress1
            lineWidth: 10
            value: 0.1
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#29b6f6"

            Text {
    
    
                text: parseInt(progress1.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress1.primaryColor
            }
        }

        CircularProgressBar {
    
    
            id: progress2
            lineWidth: 10
            value: 0.33
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#ab47bc"

            Text {
    
    
                text: parseInt(progress2.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress2.primaryColor
            }
        }

        CircularProgressBar {
    
    
            id: progress3
            lineWidth: 10
            value: 0.50
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#9ccc65"

            Text {
    
    
                text: parseInt(progress3.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress3.primaryColor
            }
        }

        CircularProgressBar {
    
    
            id: progress4
            lineWidth: 10
            value: 0.75
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#f44336"

            Text {
    
    
                text: parseInt(progress4.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress4.primaryColor
            }
        }

        CircularProgressBar {
    
    
            id: progress5
            lineWidth: 10
            value: 1
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#4db6ac"

            Text {
    
    
                text: parseInt(progress5.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress5.primaryColor
            }
        }

        CircularProgressBar {
    
    
            id: progress6
            lineWidth: 10
            value: 0.4
            size: 150
            secondaryColor: "#e0e0e0"
            primaryColor: "#4db6ac"

            Text {
    
    
                text: parseInt(progress5.value * 100) + "%"
                anchors.centerIn: parent
                font.pointSize: 20
                color: progress5.primaryColor
            }
        }
    }
}