Circular Progressindicator

[frankalex92]

Hi,

I was wondering if it´s possible to create a Progressindicator that moves in a circular motion like this:

Thanks for your help!

BR
Alex

[ogoffart]

You can use the Path element to draw an ark like that.

For example:

export component CircularProgress {
    preferred-height: 100%;
    preferred-width: 100%;
    in property <float> progress;

    path := Path {
        private property <float> radius: 0.5;
        // clamp is a workaground to get filled circle by 1.0
        private property <angle> progress: clamp(root.progress * 1turn, 0, 0.99999turn);

        viewbox-width: 1;
        viewbox-height: 1;
        width: 100%;
        height: 100%;

        stroke-width: 10px;
        stroke: Palette.accent-background;

        MoveTo {
            x: 0.5;
            y: 0;
        }

        ArcTo {
            radius-x: path.radius;
            radius-y: path.radius;
            x: 0.5 - path.radius * sin(-(path.progress) );
            y: 0.5 - path.radius * cos(-(path.progress) );
            sweep: root.progress > 0;
            large-arc: root.progress > 0.5;
        }
       
    }

    text := Text {
        font-size: parent.width / 4;
        color: Palette.accent-background;
        text: round(progress * 100);
    }
    Text {
        font-size: parent.width / 8;
        y: text.y + text.height - self.height - self.font-size/4;
        x: text.x + text.width;
        text: "%";
    }
}

SlintPad link

[frankalex92]

Ah, don't know why I assumed that something drawn with the path feature can´t change during runtime..should´ve thought of that.

Thanks!