diff --git a/less/progress.less b/less/progress.less
index ae4bd00..341d11c 100644
--- a/less/progress.less
+++ b/less/progress.less
@@ -1,9 +1,12 @@
 @progress-height: 16px;
-@progress-background: transparent;
+@progress-background: fade(@progress-bar-background, 30%);
 @progress-border-radius: 500px;
-@progress-box-shadow: @global-inset-shadow;
-@progress-bar-background: @global-secondary-background;
+@progress-box-shadow: none;
+@progress-bar-background: @global-primary-background;
 
+@progress-circle-size: 100px;
+@progress-circle-text-font-weight: @text-bold-weight;
+@progress-circle-text-font-size: @global-large-font-size;
 
 .hook-progress() {
   border-radius: @progress-border-radius;
@@ -13,3 +16,24 @@
 .hook-progress-bar() {
   border-radius: @progress-border-radius;
 }
+
+.hook-progress-misc() {
+  .uk-progress-circle[percentage] {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: @progress-circle-size;
+    height: @progress-circle-size;
+    border-radius: 50%;
+    background:
+            radial-gradient(closest-side, @table-color 70%, @global-inverse-color 70% 80%, transparent 80% 100%),
+            conic-gradient(@progress-bar-background  calc(var(--percentage) * 1%), @progress-background 0);
+
+    &::before {
+      color: @progress-bar-background;
+      font-weight: @progress-circle-text-font-weight;
+      font-size: @progress-circle-text-font-size;
+      content: attr(percentage) '%';
+    }
+  }
+}