diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/spinner/properties/spinner-table-properties/spinner-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/spinner/properties/spinner-table-properties/spinner-table-properties.component.html
index 3dad433ea..254ba4ed1 100644
--- a/projects/dxc-ngx-cdk-site/src/app/components/examples/spinner/properties/spinner-table-properties/spinner-table-properties.component.html
+++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/spinner/properties/spinner-table-properties/spinner-table-properties.component.html
@@ -18,7 +18,7 @@
         'large'
       </code>
     </td>
-    <td>The spinner can have overlay or small or large size. </td>
+    <td>Available modes of the spinner.</td>
   </tr>
   <tr>
     <td>value: string</td>
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts
index c3f22b51e..d00d14a21 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-spinner/dxc-spinner.component.ts
@@ -12,16 +12,49 @@ import { css } from "emotion";
 import { CssUtils } from "../utils";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 
+type Mode = "large" | "small" | "overlay";
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-spinner",
   templateUrl: "./dxc-spinner.component.html",
   providers: [CssUtils],
 })
 export class DxcSpinnerComponent implements OnInit {
+  /**
+   * The value of the progress indicator. If it's received the
+   * component is determinate, otherwise is indeterminate.
+   */
   @Input() value: number;
+  /**
+   * Text to be placed inside the spinner.
+   */
   @Input() label: string;
-  @Input() mode: string = "large";
-  @Input() margin: any;
+  /**
+   * Available modes of the spinner ('large' | 'small' | 'overlay').
+   */
+  @Input() mode: Mode = "large";
+  /**
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+  /**
+   * If true, the value is displayed inside the spinner..
+   */
   @Input()
   get showValue(): boolean {
     return this._showValue;
@@ -35,7 +68,6 @@ export class DxcSpinnerComponent implements OnInit {
   @HostBinding("class.overlay") isOverlayed: boolean = false;
   @HostBinding("class.small") isSmall: boolean = false;
   @HostBinding("class.large") isLarge: boolean = true;
-
   @ViewChild("svgBackgroundLarge") svgBackgroundLarge: ElementRef;
   @ViewChild("svgBackgroundSmall") svgBackgroundSmall: ElementRef;
   @ViewChild("svgLarge") svgLarge: ElementRef;
@@ -46,7 +78,6 @@ export class DxcSpinnerComponent implements OnInit {
   @ViewChild("circleSmall") circleSmall: ElementRef;
 
   isIndeterminate: boolean = true;
-
   largeSize: number = 140;
   smallSize: number = 16;
   radioLargeSize: number = 65;
@@ -352,14 +383,6 @@ export class DxcSpinnerComponent implements OnInit {
               color: var(--spinner-progressValueFontColor);
             }
           }
-          /* &.notOverlayed {
-            height: auto;
-            width: auto;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 1;
-          } */
         }
         @keyframes spinner-svg {
           0% {