diff --git a/src/components/progress-radial/progress-radial.tsx b/src/components/progress-radial/progress-radial.tsx
index 97decb7af6ca9a8fa5b27c0ebf41c6b485597e32..53d0ca0fb5b23a8970a0ddb7756c45af358f6dbd 100644
--- a/src/components/progress-radial/progress-radial.tsx
+++ b/src/components/progress-radial/progress-radial.tsx
@@ -6,19 +6,18 @@ import { Component, Prop, ComponentInterface, h } from '@stencil/core';
     shadow: true
 })
 export class ProgressRadial implements ComponentInterface {
+    initialSize: number = 120;
     @Prop() size: number = 120;
     @Prop() showLabel: boolean = false;
     @Prop() value: number = 0;
 
     render() {
-        const { size, halfSize } = { size: this.size, halfSize: this.size / 2 };
+        const { initialSize ,halfSize } = { initialSize: 120, halfSize: this.initialSize / 2 };
         return (
-            <div class= "progress-circle" data-component= "radial-progress">
+            <div class= "progress-circle" data-component= "radial-progress" style={this.getSize()}>
                 <svg class= "progress-circle-figure"
                     data-role= "figure"
-                    width= {this.size}
-                    height= {this.size}
-                    viewBox= {`0 0 ${size} ${size}`}
+                    viewBox= {`0 0 ${initialSize} ${initialSize}`}
                     style= {this.getSvgStyle()}
                 >
                     <circle class= "progress-circle-meter" cx= {halfSize} cy= {halfSize} r= "54" stroke-width= "12" />
@@ -35,7 +34,14 @@ export class ProgressRadial implements ComponentInterface {
     getSvgStyle() {
         return {
             'stroke-dasharray': '339.292',
-            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`
+            'stroke-dashoffset': `${339.292 - (this.value / 100) * 339.292}`,
+        };
+    }
+    
+    getSize() {
+        return {
+            'width': `${(this.size)}px`,
+            'height': `${(this.size)}px`,
         };
     }
 }