diff --git a/src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.scss b/src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.scss
index 1e4695077b..fff90509d4 100644
--- a/src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.scss
+++ b/src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.scss
@@ -1,11 +1,11 @@
 .custom-size {
-    width: 100px;
-    height: 100px;
+    --diameter: 50px;
+    --stroke-thickness: 3px;
 }
 
 .sample-content {
     width: 300px;
     display: flex;
     align-items: center;
-    margin-top: 30px;
+    margin: 30px;
 }
diff --git a/src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.scss b/src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.scss
index e69de29bb2..c892844d90 100644
--- a/src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.scss
+++ b/src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.scss
@@ -0,0 +1,4 @@
+igx-circular-bar {
+    margin: 20px;
+    --diameter: 50px;
+}
diff --git a/src/app/data-display/circular-progressbar/circular-progressbar.component.scss b/src/app/data-display/circular-progressbar/circular-progressbar.component.scss
index ce917e1d13..0bb026ffcc 100644
--- a/src/app/data-display/circular-progressbar/circular-progressbar.component.scss
+++ b/src/app/data-display/circular-progressbar/circular-progressbar.component.scss
@@ -1,5 +1,4 @@
 .custom-size {
-    margin-top: 20px;
-    width: 50px;
-    height: 50px;
+    margin: 20px;
+    --diameter: 50px;
 }
diff --git a/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss b/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss
index 699a7c61dc..fda9e1a58b 100644
--- a/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss
+++ b/src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss
@@ -1,9 +1,13 @@
 @use "igniteui-angular/theming" as *;
 
 $custom-theme: progress-circular-theme(
-  $base-circle-color: lightgray,
-  $fill-color-default: rgb(32, 192, 17),
+    $base-circle-color: lightgray,
+    $fill-color-default: rgb(32, 192, 17),
+    $diameter: 50px,
 );
 
 @include css-vars($custom-theme);
- 
\ No newline at end of file
+
+igx-circular-bar {
+    margin: 20px;
+}