diff --git a/.pa11yci b/.pa11yci
index 80ac24f805a..c7079c2e4dd 100644
--- a/.pa11yci
+++ b/.pa11yci
@@ -124,6 +124,12 @@
 		"http://127.0.0.1:8080/patterns/elements-input-input-week/elements-input-input-week.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-link-links/elements-link-links.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-link-links-small/elements-link-links-small.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator/elements-loading-indicator-loading-indicator.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-XS/elements-loading-indicator-loading-indicator-size-XS.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-s/elements-loading-indicator-loading-indicator-size-s.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-m/elements-loading-indicator-loading-indicator-size-m.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-l/elements-loading-indicator-loading-indicator-size-l.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-xl/elements-loading-indicator-loading-indicator-size-xl.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-progress-progress-circular-loader-dark-background/elements-progress-progress-circular-loader-dark-background.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-progress-progress-circular-loader/elements-progress-progress-circular-loader.rendered.html",
 		"http://127.0.0.1:8080/patterns/elements-progress-progress-dark-background/elements-progress-progress-dark-background.rendered.html",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4bffdcc4149..77576f7f932 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -80,6 +80,11 @@ In general we've introduced the possibility to control variants and configuratio
 - The DB Webfonts files have been updated -->
 
 ## [Unreleased]
+
+### Added
+
+- Loading Indicator: introduced new Loadingindicator (Circular Loading Spinner)
+
 ## [2.0.0-48] - 2022-08-05
 
 ### Fixed
diff --git a/source/_patterns/01-elements/loading-indicator/_loading-indicator.md b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
new file mode 100644
index 00000000000..14e18daa37b
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
@@ -0,0 +1,32 @@
+---
+title: loading
+state: inprogress
+---
+
+Progress spinners (loading indicators) show the user that a longer-lasting action is being carried out.  
+Progress/Loading Indicators are used when the application executes a server request or processes data in the frontend. The component is used as soon as the execution and the resulting delay are noticeable to the user. This keeps the user aware that his or her action is being executed.
+
+## Accessibility
+
+SVGs are often conveyed inconsistently to assistive technologies. The component’s accessibility is also highly contextual.
+For optimal user experience, use the aria-description prop to let assistive technology users know the purpose of the loading spinner.
+
+### `aria-live` and dynamic creation of html content
+
+Using JavaScript (e.g. in context of frameworks like Angular, VueJS or React), it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
+
+`aria-live` triggers screen readers when an element with aria-live (or text within an element with aria-live) is added or removed from the DOM. In contrast, when you unhide a hidden element, neither elements nor text are added or removed from the DOM, so the element's aria-live property doesn’t come into play.
+
+Note that the live region needs to be present in the markup before the notification is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
+
+You also need to adapt the `role` and `aria-live` level depending on the content. Further information can be found here [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
+
+## Recommendations
+
+### Do
+
+If the application is waiting for a process, it makes sense to display an indicator in a central location.
+
+### Don‘t
+
+An indicator should not be used to visualize the application waiting for user input.
diff --git a/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss b/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss
new file mode 100644
index 00000000000..3d3389c17a3
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss
@@ -0,0 +1,9 @@
+@import "../../../css/db-ui-core.variables";
+
+$db-spinner-sizes: (
+	"xs": 20px,
+	"s": 28px,
+	"m": 36px,
+	"l": 44px,
+	"xl": 52px
+);
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs b/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs
new file mode 100644
index 00000000000..184f8b58690
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs
@@ -0,0 +1,16 @@
+<svg
+	class="elm-loadingindicator"
+	viewBox="0 0 44 44"
+	aria-labelledby="elm-loadingindicator__description" role="img"
+	{{#if size }} data-size="{{ size }}"{{/if }}
+>
+	<title id="elm-loadingindicator__description">{{aria-description}}</title>
+	<circle
+		class="elm-loadingindicator__circle"
+		cx="22"
+		cy="22"
+		r="20"
+		fill="none"
+		stroke-miterlimit="10"
+	></circle>
+</svg>
\ No newline at end of file
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.json b/source/_patterns/01-elements/loading-indicator/loading-indicator.json
new file mode 100644
index 00000000000..de359ca53e3
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.json
@@ -0,0 +1,3 @@
+{
+	"aria-description": "Example description for loading spinner"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
new file mode 100644
index 00000000000..e28d3ba696c
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
@@ -0,0 +1,86 @@
+@charset "utf-8";
+@use "sass:math";
+
+@import "loading-indicator.variables";
+
+.elm-loadingindicator {
+	display: block;
+}
+
+@mixin loadingindicator--sizes($prefix) {
+	@each $size in (xl l m s xs) {
+		$stroke-width: 3px;
+		@if $size == s or $size == xs {
+			$stroke-width: 2px;
+		}
+		//.#{$prefix}loadingindicator--size-#{$size} {
+		&%size-#{$size} {
+			--loadingindicator--stroke-width: #{math.div(
+					44px,
+					map-get($db-spinner-sizes, $size)
+				) *
+				$stroke-width};
+			--loadingindicator--r: 19px;
+			height: map-get($db-spinner-sizes, $size);
+			width: map-get($db-spinner-sizes, $size);
+		}
+	}
+}
+
+.elm-loadingindicator {
+	color: $db-color-red-500;
+	animation: loadingindicator-rotate 3s linear infinite;
+
+	@include loadingindicator--sizes("elm-");
+
+	@extend %size-m; // default
+
+	&[data-size="xs"] {
+		@extend %size-xs;
+	}
+	&[data-size="s"] {
+		@extend %size-s;
+	}
+	&[data-size="m"] {
+		@extend %size-m;
+	}
+	&[data-size="l"] {
+		@extend %size-l;
+	}
+	&[data-size="xl"] {
+		@extend %size-xl;
+	}
+}
+
+.elm-loadingindicator__circle {
+	r: var(--loadingindicator--r);
+	stroke-dasharray: 1, 200;
+	stroke-dashoffset: 0;
+	stroke: currentcolor;
+	stroke-width: var(--loadingindicator--stroke-width);
+	animation: loadingindicator-stroke 1.5s ease-in-out infinite;
+	stroke-linecap: round;
+}
+
+@keyframes loadingindicator-rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loadingindicator-stroke {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0;
+	}
+
+	50% {
+		stroke-dasharray: 96, 200;
+		stroke-dashoffset: -32;
+	}
+
+	100% {
+		stroke-dasharray: 96, 200;
+		stroke-dashoffset: -124;
+	}
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-S.md b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-S.md
new file mode 100644
index 00000000000..70b19211c22
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-S.md
@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size S
+order: 2
+---
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.json b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.json
new file mode 100644
index 00000000000..cff48bc3714
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.json
@@ -0,0 +1,4 @@
+{
+	"size": "xs",
+	"aria-description": "Example description for xs loading spinner"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.md b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.md
new file mode 100644
index 00000000000..e1d107c2a09
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.md
@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size XS
+order: 1
+---
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.json b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.json
new file mode 100644
index 00000000000..3fc60d3ba4a
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.json
@@ -0,0 +1,4 @@
+{
+	"size": "l",
+	"aria-description": "Example description for loading spinner size L"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.md b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.md
new file mode 100644
index 00000000000..af813da24df
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.md
@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size L
+order: 4
+---
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.json b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.json
new file mode 100644
index 00000000000..f1a96b7b88f
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.json
@@ -0,0 +1,4 @@
+{
+	"size": "m",
+	"aria-description": "Example description for loading spinner size M"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.md b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.md
new file mode 100644
index 00000000000..30dcc49db2c
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.md
@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size M
+order: 3
+---
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-s.json b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-s.json
new file mode 100644
index 00000000000..1738360ae29
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-s.json
@@ -0,0 +1,4 @@
+{
+	"size": "s",
+	"aria-description": "Example description for s loading spinner"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.json b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.json
new file mode 100644
index 00000000000..e72fb151f37
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.json
@@ -0,0 +1,4 @@
+{
+	"size": "xl",
+	"aria-description": "Example description for loading spinner size XL"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.md b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.md
new file mode 100644
index 00000000000..aa0e879c808
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.md
@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size XL
+order: 5
+---
diff --git a/source/css/enterprise/db-ui-core.scss b/source/css/enterprise/db-ui-core.scss
index 9fa7c1835bf..bb3485623db 100644
--- a/source/css/enterprise/db-ui-core.scss
+++ b/source/css/enterprise/db-ui-core.scss
@@ -37,6 +37,8 @@ $partial: false;
 @import "../../_patterns/01-elements/checkbox/enterprise/checkbox";
 /* input */
 @import "../../_patterns/01-elements/input/enterprise/input";
+/* loading */
+@import "../../_patterns/01-elements/loading-indicator/loading-indicator";
 /* progress */
 @import "../../_patterns/01-elements/progress/enterprise/progress";
 /* radio */
diff --git a/tests/backstop.json b/tests/backstop.json
index 94f8b022087..d71276a0b23 100644
--- a/tests/backstop.json
+++ b/tests/backstop.json
@@ -830,6 +830,11 @@
 			"postInteractionWait": 1000,
 			"onReadyScript": "puppet/clickAndHoverHelper.js"
 		},
+		{
+			"label": "Loading indicator",
+			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator/index.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator/index.html"
+		},
 		{
 			"label": "Progress",
 			"url": "http://127.0.0.1:8080/patterns/elements-progress-progress/elements-progress-progress.rendered.html",