fix(circular-progress): fix diameter/size prop setting

Author: ddaribo

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;
 }

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;
+}

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;
 }

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);
- 
+
+igx-circular-bar {
+    margin: 20px;
+}