diff --git a/src/components/data-spinner/data-spinner.component.css b/src/components/data-spinner/data-spinner.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/data-spinner/data-spinner.component.html b/src/components/data-spinner/data-spinner.component.html
new file mode 100644
index 0000000..392a2d6
--- /dev/null
+++ b/src/components/data-spinner/data-spinner.component.html
@@ -0,0 +1 @@
+<mat-progress-spinner [color]="color" mode="indeterminate" [diameter]="scale" />
diff --git a/src/components/data-spinner/data-spinner.component.ts b/src/components/data-spinner/data-spinner.component.ts
new file mode 100644
index 0000000..b1c99fb
--- /dev/null
+++ b/src/components/data-spinner/data-spinner.component.ts
@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+import {MatProgressSpinner} from "@angular/material/progress-spinner";
+import {NgStyle} from "@angular/common";
+
+@Component({
+  selector: 'app-data-spinner',
+  standalone: true,
+  imports: [
+    MatProgressSpinner,
+    NgStyle
+  ],
+  templateUrl: './data-spinner.component.html',
+  styleUrl: './data-spinner.component.css'
+})
+export class DataSpinnerComponent {
+  @Input() color: string = "accent";
+  @Input() scale: number = 50;
+}