SpinnerEffect.qml

spinner_effect.qml

import QtQuick 2.2
import QtQuick.Window 2.2


Window {
    color: "gray"

    NumberAnimation {
        target: fx
        property: "angle"; from: Math.PI * 2; to: 0
        loops: Animation.Infinite
        running: true
        duration: 2000
    }

    ShaderEffect {
        id: fx

        anchors.centerIn: parent
        width: 64
        height: 64

        property real angle

        property var mask: Image {
            sourceSize: Qt.size(fx.width, fx.height)
            source: "squircle.svg"
        }

        property var background: ShaderEffectSource {
            id: fbo
            live: false
            sourceItem: Canvas {
                width: fx.width
                height: fx.height
                onPaint: {
                    var ctx = getContext('2d');
                    ctx.reset();
                    var gradient = ctx.createConicalGradient(width / 2, width / 2, 0);
                    gradient.addColorStop(0, "#fff");
                    gradient.addColorStop(1, "#00000000");
                    ctx.fillStyle = gradient
                    ctx.fillRect(0,0, width, height);
                    fbo.scheduleUpdate();
                }
            }
        }

        fragmentShader: "#version 120
            varying highp vec2 qt_TexCoord0;
            uniform lowp float qt_Opacity;
            uniform sampler2D mask;
            uniform sampler2D background;
            uniform float angle;
            void main() {
                mat4 transf = mat4(1.0, 0.0, 0.0, -0.5,
                                   0.0, 1.0, 0.0, -0.5,
                                   0.0, 0.0, 1.0,  0.0,
                                   0.0, 0.0, 0.0,  1.0)
                            * mat4(cos(angle), -sin(angle), 0.0, 0.0,
                                   sin(angle),  cos(angle), 0.0, 0.0,
                                   0.0,         0.0,        1.0, 0.0,
                                   0.0,         0.0,        0.0, 1.0)
                            * mat4(1.0, 0.0, 0.0, 0.5,
                                   0.0, 1.0, 0.0, 0.5,
                                   0.0, 0.0, 1.0, 0.0,
                                   0.0, 0.0, 0.0, 1.0);

                vec4 coord = vec4(qt_TexCoord0, 0, 1) * transf;
                vec4 color_tex = texture2D(background, coord.st);
                vec4 mask_tex = texture2D(mask, qt_TexCoord0.st);
                color_tex.a *= mask_tex.a;
                gl_FragColor =  color_tex * mask_tex.a * qt_Opacity;
            }"
    }
}

squircle.svg

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="-60 -60 120 120">
<path fill="none" stroke="#000000" stroke-width="16" d="M0,47.36842105263158
C20.75657894736842,47.36842105263158,32.29544407894737,47.36842105263158,39.831940789473684,39.831940789473684
C47.36842105263158,32.29544407894737,47.36842105263158,20.75657894736842,47.36842105263158,0
C47.36842105263158,-20.75657894736842,47.36842105263158,-32.29544407894737,39.831940789473684,-39.831940789473684
C32.29544407894737,-47.36842105263158,20.75657894736842,-47.36842105263158,0,-47.36842105263158
C-20.75657894736842,-47.36842105263158,-32.29544407894737,-47.36842105263158,-39.831940789473684,-39.831940789473684
C-47.36842105263158,-32.29544407894737,-47.36842105263158,-20.75657894736842,-47.36842105263158,0
C-47.36842105263158,20.75657894736842,-47.36842105263158,32.29544407894737,-39.831940789473684,39.831940789473684
C-32.29544407894737,47.36842105263158,-20.75657894736842,47.36842105263158,0,47.36842105263158Z"/></svg>