uAtomicBoolean · uAtomicBoolean · Mar 23, 2026
diff --git a/ui/app-window.slint b/ui/app-window.slint
@@ -36,6 +36,9 @@ export component AppWindow inherits Window {
     preferred-width: 1280px;
     preferred-height: 720px;
     background: UAppTheme.bg-container;
+    init => {
+        UMenuLogic.current-link = "circle-progress";
+    }
     FocusScope {
         HorizontalLayout {
             Sidebar { }

diff --git a/ui/components/page-manager.slint b/ui/components/page-manager.slint
@@ -41,7 +41,8 @@ import {
     CodePage,
     CollapsePage,
     IconPage,
-    LinearProgressPage,
+    LineProgressPage,
+    CircleProgressPage,
     TagPage,
     TextPage,
     TitlePage,
@@ -106,7 +107,8 @@ export component PageManager {
         if current-page == "code": CodePage { }
         if current-page == "collapse": CollapsePage { }
         if current-page == "icon": IconPage { }
-        if current-page == "linear-progress": LinearProgressPage { }
+        if current-page == "linear-progress": LineProgressPage { }
+        if current-page == "circle-progress": CircleProgressPage { }
         if current-page == "tag": TagPage { }
         if current-page == "text": TextPage { }
         if current-page == "title": TitlePage { }

diff --git a/ui/components/sidebar.slint b/ui/components/sidebar.slint
@@ -227,6 +227,12 @@ export component Sidebar inherits Rectangle {
                             name: "Linear progress";
                         }
 
+                        UMenuLink {
+                            parent-child-opened <=> parent.child-opened;
+                            id: "circle-progress";
+                            name: "Circle progress";
+                        }
+
                         UMenuLink {
                             parent-child-opened <=> parent.child-opened;
                             id: "tag";

diff --git a/ui/pages/home.slint b/ui/pages/home.slint
@@ -4,7 +4,7 @@ import {
     UText,
     UButton,
     USlider,
-    ULinearProgress,
+    ULineProgress,
     UInput,
     UInputNumber,
     ULink,
@@ -138,7 +138,7 @@ export component HomePage inherits PageBase {
     HorizontalLayout {
         alignment: center;
         padding-top: UAppTheme.padding-bigger;
-        ULinearProgress {
+        ULineProgress {
             width: 300px;
             progress: 30%;
             indeterminate: true;

diff --git a/ui/pages/page-index.slint b/ui/pages/page-index.slint
@@ -38,7 +38,8 @@ export { CardPage } from "widgets/card.slint";
 export { CodePage } from "widgets/code.slint";
 export { CollapsePage } from "widgets/collapse.slint";
 export { IconPage } from "widgets/icon.slint";
-export { LinearProgressPage } from "widgets/linear-progress.slint";
+export { LineProgressPage } from "widgets/line-progress.slint";
+export { CircleProgressPage } from "widgets/circle-progress.slint";
 export { TagPage } from "widgets/tag.slint";
 export { TextPage } from "widgets/text.slint";
 export { TitlePage } from "widgets/title.slint";

diff --git a/ui/pages/widgets/circle-progress.slint b/ui/pages/widgets/circle-progress.slint
@@ -0,0 +1,50 @@
+import { UAppTheme } from "../../sleek-ui/app-theme.slint";
+import { UTitle, UCircleProgress } from "../../sleek-ui/widgets.slint";
+
+import {
+    DocTitle,
+    DocDescription,
+    WidgetPresentation,
+    DocSection,
+    DocCode,
+} from "../../components/doc-widgets.slint";
+import { PageBase } from "../../components/page-base.slint";
+import { AppLogic } from "../../app-logic.slint";
+
+
+export component CircleProgressPage inherits PageBase {
+    UTitle {
+        level: 3;
+        text: "Circle progress";
+    }
+
+    DocDescription {
+        text: "A circular progress bar.";
+    }
+
+    DocSection {
+        title: "Basic usage";
+        description: [
+            [
+                { text: "Define the current progress with the " },
+                { code: "progress" },
+                { text: " property." },
+            ],
+            [
+                { text:"Do not forget to set the width or height depending on the orientation." }
+            ],
+        ];
+    }
+
+    WidgetPresentation {
+        UCircleProgress {
+            width: 300px;
+            progress: 40%;
+            indeterminate: true;
+        }
+    }
+
+    DocCode {
+        code: "ULinearProgress {\n    width: 300px;\n    progress: 40%;\n}";
+    }
+}
diff --git a/ui/pages/widgets/linear-progress.slint → ui/pages/widgets/line-progress.slint b/ui/pages/widgets/linear-progress.slint → ui/pages/widgets/line-progress.slint
@@ -1,5 +1,5 @@
 import { UAppTheme } from "../../sleek-ui/app-theme.slint";
-import { UTitle, ULinearProgress } from "../../sleek-ui/widgets.slint";
+import { UTitle, ULineProgress } from "../../sleek-ui/widgets.slint";
 
 import {
     DocTitle,
@@ -12,7 +12,7 @@ import { PageBase } from "../../components/page-base.slint";
 import { AppLogic } from "../../app-logic.slint";
 
 
-export component LinearProgressPage inherits PageBase {
+export component LineProgressPage inherits PageBase {
     UTitle {
         level: 3;
         text: "Linear progress";
@@ -37,15 +37,15 @@ export component LinearProgressPage inherits PageBase {
     }
 
     WidgetPresentation {
-        ULinearProgress {
+        ULineProgress {
             width: 300px;
             progress: 40%;
             indeterminate: true;
         }
     }
 
     DocCode {
-        code: "ULinearProgress {\n    width: 300px;\n    progress: 40%;\n}";
+        code: "ULineProgress {\n    width: 300px;\n    progress: 40%;\n}";
     }
 
     DocSection {
@@ -68,14 +68,14 @@ export component LinearProgressPage inherits PageBase {
 
     WidgetPresentation {
         spacing: UAppTheme.spacing-base;
-        ULinearProgress {
+        ULineProgress {
             height: 100px;
             orientation: vertical;
             direction: start;
             progress: 40%;
         }
 
-        ULinearProgress {
+        ULineProgress {
             height: 100px;
             orientation: vertical;
             direction: end;
@@ -84,7 +84,7 @@ export component LinearProgressPage inherits PageBase {
     }
 
     DocCode {
-        code: "ULinearProgress {\n    height: 300px;\n    orientation: vertical;\n    direction: end;\n    progress: 40%;\n}";
+        code: "ULineProgress {\n    height: 300px;\n    orientation: vertical;\n    direction: end;\n    progress: 40%;\n}";
     }
 
     DocSection {
@@ -101,14 +101,14 @@ export component LinearProgressPage inherits PageBase {
     }
 
     WidgetPresentation {
-        ULinearProgress {
+        ULineProgress {
             width: 300px;
             indeterminate: true;
         }
     }
 
     DocCode {
-        code: "ULinearProgress {\n    width: 300px;\n    indeterminate: true;\n}";
+        code: "ULineProgress {\n    width: 300px;\n    indeterminate: true;\n}";
     }
 
     DocSection {
@@ -126,7 +126,7 @@ export component LinearProgressPage inherits PageBase {
     }
 
     WidgetPresentation {
-        ULinearProgress {
+        ULineProgress {
             width: 300px;
             default-size: 30px;
             default-radius: UAppTheme.radius-base;
@@ -135,6 +135,6 @@ export component LinearProgressPage inherits PageBase {
     }
 
     DocCode {
-        code: "ULinearProgress {\n    width: 300px;\n    default-size: 30px;\n    default-radius: UAppTheme.radius-base;\n    progress: 40%;\n}";
+        code: "ULineProgress {\n    width: 300px;\n    default-size: 30px;\n    default-radius: UAppTheme.radius-base;\n    progress: 40%;\n}";
     }
 }
diff --git a/ui/sleek-ui/widgets.slint b/ui/sleek-ui/widgets.slint
@@ -17,7 +17,8 @@ export { UMenu, UMenuLink, UMenuGroupTitle, UMenuSubmenu, UMenuVariant, UMenuLog
 export { UModal, UModalLogic } from "widgets/modal.slint";
 export { UTabs } from "widgets/tabs.slint";
 export { UNotification, UNotificationVariant } from "widgets/notification.slint";
-export { ULinearProgress, ULinearProgressVariant } from "widgets/linear-progress.slint";
+export { ULineProgress, UProgressVariant } from "widgets/linear-progress.slint";
+export { UCircleProgress } from "widgets/circle-progress.slint";
 export { UPopover } from "widgets/popover.slint";
 export { URadio } from "widgets/radio.slint";
 export { URadioButton, URadioButtonVariant } from "widgets/radio-button.slint";

diff --git a/ui/sleek-ui/widgets/circle-progress.slint b/ui/sleek-ui/widgets/circle-progress.slint
@@ -0,0 +1,67 @@
+import { UAppTheme } from "../app-theme.slint";
+import { UProgressVariant } from "linear-progress.slint";
+
+
+export component UCircleProgress inherits Path {
+	// Accessability properties
+	accessible-role: progress-indicator;
+    accessible-value-minimum: 0;
+    accessible-value-maximum: 100;
+	// Regular properties
+    in-out property <brush> progress-color;
+    in-out property <UProgressVariant> variant: primary;
+    in property <length> default-size: 10px;
+    in-out property <percent> progress: indeterminate ? 30% : 0%;
+    in-out property <bool> indeterminate: false;
+    width: 40px;
+    height: 40px;
+    stroke: progress-color;
+    stroke-width: default-size;
+    stroke-line-cap: round;
+    viewbox-width: self.width / 1px;
+    viewbox-height: self.height / 1px;
+    changed progress => {
+        if indeterminate {
+            progress = 30%;
+        }
+    }
+    changed indeterminate => {
+        if indeterminate {
+            progress = 30%;
+        }
+    }
+
+	// Inner properties used for rendering.
+    private property <float> start-x: self.width / 2px;
+    private property <float> start-y: self.height / 2px;
+    private property <float> radius: self.width / 2px;
+    private property <angle> offset: 115deg;
+    MoveTo {
+        x: start-x + radius * cos(0deg + offset);
+        y: start-y + radius * sin(0deg + offset);
+    }
+
+    ArcTo {
+        x: start-x + radius * cos(310deg * progress + offset);
+        y: start-y + radius * sin(310deg * progress + offset);
+        large-arc: progress > 0.6666666;
+        radius-x: radius;
+        radius-y: radius;
+        sweep: true;
+    }
+
+    states [
+        primary when variant == UProgressVariant.primary: {
+            progress-color: UAppTheme.primary.base;
+        }
+        success when variant == UProgressVariant.success: {
+            progress-color: UAppTheme.success.base;
+        }
+        warning when variant == UProgressVariant.warning: {
+            progress-color: UAppTheme.warning.base;
+        }
+        danger when variant == UProgressVariant.danger: {
+            progress-color: UAppTheme.danger.base;
+        }
+    ]
+}
diff --git a/ui/sleek-ui/widgets/linear-progress.slint b/ui/sleek-ui/widgets/linear-progress.slint
@@ -6,28 +6,27 @@ enum ProgressDirection {
 	end,
 }
 
-export enum ULinearProgressVariant {
+export enum UProgressVariant {
 	primary,
 	success,
 	warning,
 	danger,
 }
 
-export component ULinearProgress inherits Rectangle {
+export component ULineProgress inherits Rectangle {
 	// Accessability properties
 	accessible-role: progress-indicator;
     accessible-value-minimum: 0;
     accessible-value-maximum: 100;
 	// Regular properties
-    private property <brush> progress-color;
-    in-out property <ULinearProgressVariant> variant: primary;
+    in-out property <brush> progress-color;
+    in-out property <UProgressVariant> variant: primary;
     in property <length> default-size: 10px;
     in property <length> default-radius: UAppTheme.radius-round;
     in property <Orientation> orientation: horizontal;
     in property <ProgressDirection> direction: start;
     in-out property <percent> progress: indeterminate ? 30% : 0%;
     in-out property <bool> indeterminate: false;
-    callback reset-x();
     background: UAppTheme.color-fill-secondary;
     border-radius: default-radius;
     clip: true;
@@ -118,16 +117,16 @@ export component ULinearProgress inherits Rectangle {
         }
     }
     states [
-        primary when variant == ULinearProgressVariant.primary: {
+        primary when variant == UProgressVariant.primary: {
             progress-color: UAppTheme.primary.base;
         }
-        success when variant == ULinearProgressVariant.success: {
+        success when variant == UProgressVariant.success: {
             progress-color: UAppTheme.success.base;
         }
-        warning when variant == ULinearProgressVariant.warning: {
+        warning when variant == UProgressVariant.warning: {
             progress-color: UAppTheme.warning.base;
         }
-        danger when variant == ULinearProgressVariant.danger: {
+        danger when variant == UProgressVariant.danger: {
             progress-color: UAppTheme.danger.base;
         }
     ]