From 7022602671e2e1db17db3252da5ba4885d4a866b Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Tue, 30 Aug 2022 15:51:25 +0200
Subject: [PATCH 1/7] feat: added loading indicator (circular spinner)

---
 .pa11yci                                      |  5 ++
 CHANGELOG.md                                  |  5 ++
 .../00-loading-indicator.hbs                  | 15 +++++
 .../00-loading-indicator.json                 |  4 ++
 .../loading-indicator/00-loading-indicator.md |  3 +
 .../01-loading-indicator-size-XS.hbs          |  3 +
 .../02-loading-indicator-size-s.hbs           |  3 +
 .../03-loading-indicator-size-m.hbs           |  3 +
 .../04-loading-indicator-size-l.hbs           |  3 +
 .../05-loading-indicator-size-XL.hbs          |  3 +
 .../loading-indicator/_loading-indicator.md   | 22 ++++++
 .../_loading-indicator.variables.scss         |  9 +++
 .../loading-indicator/loading-indicator.scss  | 67 +++++++++++++++++++
 source/css/enterprise/db-ui-core.scss         |  2 +
 14 files changed, 147 insertions(+)
 create mode 100644 source/_patterns/01-elements/loading-indicator/00-loading-indicator.hbs
 create mode 100644 source/_patterns/01-elements/loading-indicator/00-loading-indicator.json
 create mode 100644 source/_patterns/01-elements/loading-indicator/00-loading-indicator.md
 create mode 100644 source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs
 create mode 100644 source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs
 create mode 100644 source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs
 create mode 100644 source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs
 create mode 100644 source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs
 create mode 100644 source/_patterns/01-elements/loading-indicator/_loading-indicator.md
 create mode 100644 source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator.scss

diff --git a/.pa11yci b/.pa11yci
index 80ac24f805a..2e7b724aa44 100644
--- a/.pa11yci
+++ b/.pa11yci
@@ -124,6 +124,11 @@
 		"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-01-loading-indicator-size-XS/elements-loading-indicator-01-loading-indicator-size-XS.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-02-loading-indicator-size-s/elements-loading-indicator-02-loading-indicator-size-s.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-03-loading-indicator-size-m/elements-loading-indicator-03-loading-indicator-size-m.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-04-loading-indicator-size-l/elements-loading-indicator-04-loading-indicator-size-l.rendered.html",
+		"http://127.0.0.1:8080/patterns/elements-loading-indicator-05-loading-indicator-size-XL/elements-loading-indicator-05-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..3160005f5dd 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]
+
+## [2.0.0-49] - 2022-08-30
+
+- 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/00-loading-indicator.hbs b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.hbs
new file mode 100644
index 00000000000..af03e0d947a
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.hbs
@@ -0,0 +1,15 @@
+<svg
+	class="elm-loadingindicator elm-loadingindicator--size-{{ size }}"
+	viewBox="0 0 44 44"
+	aria-labelledby="elm-loadingindicator__description" role="img"
+>
+	<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/00-loading-indicator.json b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.json
new file mode 100644
index 00000000000..f0eda7a4ee9
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.json
@@ -0,0 +1,4 @@
+{
+	"size": "l",
+	"aria-description": "Example description for loading spinner"
+}
diff --git a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.md b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.md
new file mode 100644
index 00000000000..683af9f1a99
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.md
@@ -0,0 +1,3 @@
+---
+hidden: true
+---
diff --git a/source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs b/source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs
new file mode 100644
index 00000000000..7faebffc5d8
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs
@@ -0,0 +1,3 @@
+<p>
+	{{> elements-loading-indicator size='xs' aria-description='test' }}
+</p>
diff --git a/source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs b/source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs
new file mode 100644
index 00000000000..2ceaa773b7f
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs
@@ -0,0 +1,3 @@
+<p>
+	{{> elements-loading-indicator size='s' describedbyid='' }}
+</p>
diff --git a/source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs b/source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs
new file mode 100644
index 00000000000..9f86cf9c22a
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs
@@ -0,0 +1,3 @@
+<p>
+	{{> elements-loading-indicator size='m' describedbyid='' }}
+</p>
diff --git a/source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs b/source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs
new file mode 100644
index 00000000000..110cae33568
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs
@@ -0,0 +1,3 @@
+<p>
+	{{> elements-loading-indicator size='l' describedbyid='' }}
+</p>
diff --git a/source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs b/source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs
new file mode 100644
index 00000000000..e77a1149f8b
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs
@@ -0,0 +1,3 @@
+<p>
+	{{> elements-loading-indicator size='xl' describedbyid='' }}
+</p>
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..7e1549c0666
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
@@ -0,0 +1,22 @@
+---
+title: loading
+state: inevaluation
+---
+
+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.
+
+## 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.scss b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
new file mode 100644
index 00000000000..23706c4c335
--- /dev/null
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
@@ -0,0 +1,67 @@
+@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} {
+			--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);
+		}
+	}
+}
+
+@include loadingindicator--sizes("elm-");
+
+.elm-loadingindicator {
+	color: $db-color-red-500;
+	animation: loadingindicator-rotate 3s linear infinite;
+}
+
+.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/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 */

From 74f6c619f0bc49c100aefab7950bb8c8c9117959 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 31 Aug 2022 12:43:37 +0200
Subject: [PATCH 2/7] Update CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3160005f5dd..77576f7f932 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -81,7 +81,7 @@ In general we've introduced the possibility to control variants and configuratio
 
 ## [Unreleased]
 
-## [2.0.0-49] - 2022-08-30
+### Added
 
 - Loading Indicator: introduced new Loadingindicator (Circular Loading Spinner)
 

From a35630a54addff7e8f1561c3efed8b4267a7a508 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Fri, 2 Sep 2022 12:58:03 +0200
Subject: [PATCH 3/7] fix: using pseudo patterns for loading indicator due to
 code review feedback

---
 .../loading-indicator/00-loading-indicator.md |  3 ---
 .../01-loading-indicator-size-XS.hbs          |  3 ---
 .../02-loading-indicator-size-s.hbs           |  3 ---
 .../03-loading-indicator-size-m.hbs           |  3 ---
 .../04-loading-indicator-size-l.hbs           |  3 ---
 .../05-loading-indicator-size-XL.hbs          |  3 ---
 .../loading-indicator/_loading-indicator.md   | 10 ++++++++
 ...ng-indicator.hbs => loading-indicator.hbs} |  3 ++-
 ...-indicator.json => loading-indicator.json} |  1 -
 .../loading-indicator/loading-indicator.scss  | 25 ++++++++++++++++---
 .../loading-indicator~size-S.md               |  4 +++
 .../loading-indicator~size-XS.json            |  4 +++
 .../loading-indicator~size-XS.md              |  4 +++
 .../loading-indicator~size-l.json             |  4 +++
 .../loading-indicator~size-l.md               |  4 +++
 .../loading-indicator~size-m.json             |  4 +++
 .../loading-indicator~size-m.md               |  4 +++
 .../loading-indicator~size-s.json             |  4 +++
 .../loading-indicator~size-xl.json            |  4 +++
 .../loading-indicator~size-xl.md              |  4 +++
 20 files changed, 74 insertions(+), 23 deletions(-)
 delete mode 100644 source/_patterns/01-elements/loading-indicator/00-loading-indicator.md
 delete mode 100644 source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs
 delete mode 100644 source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs
 delete mode 100644 source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs
 delete mode 100644 source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs
 delete mode 100644 source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs
 rename source/_patterns/01-elements/loading-indicator/{00-loading-indicator.hbs => loading-indicator.hbs} (79%)
 rename source/_patterns/01-elements/loading-indicator/{00-loading-indicator.json => loading-indicator.json} (82%)
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-S.md
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.json
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.md
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.json
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.md
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.json
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.md
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-s.json
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.json
 create mode 100644 source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.md

diff --git a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.md b/source/_patterns/01-elements/loading-indicator/00-loading-indicator.md
deleted file mode 100644
index 683af9f1a99..00000000000
--- a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.md
+++ /dev/null
@@ -1,3 +0,0 @@
----
-hidden: true
----
diff --git a/source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs b/source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs
deleted file mode 100644
index 7faebffc5d8..00000000000
--- a/source/_patterns/01-elements/loading-indicator/01-loading-indicator-size-XS.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-	{{> elements-loading-indicator size='xs' aria-description='test' }}
-</p>
diff --git a/source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs b/source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs
deleted file mode 100644
index 2ceaa773b7f..00000000000
--- a/source/_patterns/01-elements/loading-indicator/02-loading-indicator-size-s.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-	{{> elements-loading-indicator size='s' describedbyid='' }}
-</p>
diff --git a/source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs b/source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs
deleted file mode 100644
index 9f86cf9c22a..00000000000
--- a/source/_patterns/01-elements/loading-indicator/03-loading-indicator-size-m.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-	{{> elements-loading-indicator size='m' describedbyid='' }}
-</p>
diff --git a/source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs b/source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs
deleted file mode 100644
index 110cae33568..00000000000
--- a/source/_patterns/01-elements/loading-indicator/04-loading-indicator-size-l.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-	{{> elements-loading-indicator size='l' describedbyid='' }}
-</p>
diff --git a/source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs b/source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs
deleted file mode 100644
index e77a1149f8b..00000000000
--- a/source/_patterns/01-elements/loading-indicator/05-loading-indicator-size-XL.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-	{{> elements-loading-indicator size='xl' describedbyid='' }}
-</p>
diff --git a/source/_patterns/01-elements/loading-indicator/_loading-indicator.md b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
index 7e1549c0666..c23a6372871 100644
--- a/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
+++ b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
@@ -11,6 +11,16 @@ Progress/Loading Indicators are used when the application executes a server requ
 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
diff --git a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.hbs b/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs
similarity index 79%
rename from source/_patterns/01-elements/loading-indicator/00-loading-indicator.hbs
rename to source/_patterns/01-elements/loading-indicator/loading-indicator.hbs
index af03e0d947a..184f8b58690 100644
--- a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.hbs
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs
@@ -1,7 +1,8 @@
 <svg
-	class="elm-loadingindicator elm-loadingindicator--size-{{ size }}"
+	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
diff --git a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.json b/source/_patterns/01-elements/loading-indicator/loading-indicator.json
similarity index 82%
rename from source/_patterns/01-elements/loading-indicator/00-loading-indicator.json
rename to source/_patterns/01-elements/loading-indicator/loading-indicator.json
index f0eda7a4ee9..de359ca53e3 100644
--- a/source/_patterns/01-elements/loading-indicator/00-loading-indicator.json
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.json
@@ -1,4 +1,3 @@
 {
-	"size": "l",
 	"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
index 23706c4c335..e28d3ba696c 100644
--- a/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
+++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.scss
@@ -13,7 +13,8 @@
 		@if $size == s or $size == xs {
 			$stroke-width: 2px;
 		}
-		.#{$prefix}loadingindicator--size-#{$size} {
+		//.#{$prefix}loadingindicator--size-#{$size} {
+		&%size-#{$size} {
 			--loadingindicator--stroke-width: #{math.div(
 					44px,
 					map-get($db-spinner-sizes, $size)
@@ -26,11 +27,29 @@
 	}
 }
 
-@include loadingindicator--sizes("elm-");
-
 .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 {
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
+---

From a2d8617a9b3f5e60883d283a7d4b3c12027e3834 Mon Sep 17 00:00:00 2001
From: Anna Schoderer <anna.schoderer@deutschebahn.com>
Date: Tue, 6 Sep 2022 17:37:35 +0200
Subject: [PATCH 4/7] test: update backstop.json

---
 tests/backstop.json | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/tests/backstop.json b/tests/backstop.json
index 94f8b022087..4ae3ec33ccd 100644
--- a/tests/backstop.json
+++ b/tests/backstop.json
@@ -830,6 +830,32 @@
 			"postInteractionWait": 1000,
 			"onReadyScript": "puppet/clickAndHoverHelper.js"
 		},
+		{
+			"label": "Loading indicator Size XS",
+			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-XS/elements-loading-indicator-loading-indicator-size-XS.rendered.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-XS/elements-loading-indicator-loading-indicator-size-XS.rendered.html"
+		},
+		{
+			"label": "Loading indicator Size S",
+			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-s/elements-loading-indicator-loading-indicator-size-s.rendered.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-s/elements-loading-indicator-loading-indicator-size-s.rendered.html"
+		},
+		{
+			"label": "Loading indicator Size M",
+			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-m/elements-loading-indicator-loading-indicator-size-m.rendered.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-m/elements-loading-indicator-loading-indicator-size-m.rendered.html"
+		},
+		{
+			"label": "Loading indicator Size L",
+			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-l/elements-loading-indicator-loading-indicator-size-l.rendered.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-l/elements-loading-indicator-loading-indicator-size-l.rendered.html"
+		},
+		{
+			"label": "Loading indicator Size XL",
+			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-xl/elements-loading-indicator-loading-indicator-size-xl.rendered.html",
+			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-xl/elements-loading-indicator-loading-indicator-size-xl.rendered.html"
+		},
+
 		{
 			"label": "Progress",
 			"url": "http://127.0.0.1:8080/patterns/elements-progress-progress/elements-progress-progress.rendered.html",

From 5c5ef74118a7e4a38654a1e4887a587d249dadc2 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 7 Sep 2022 11:52:25 +0200
Subject: [PATCH 5/7] Update _loading-indicator.md

---
 .../01-elements/loading-indicator/_loading-indicator.md         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/_patterns/01-elements/loading-indicator/_loading-indicator.md b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
index c23a6372871..14e18daa37b 100644
--- a/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
+++ b/source/_patterns/01-elements/loading-indicator/_loading-indicator.md
@@ -1,6 +1,6 @@
 ---
 title: loading
-state: inevaluation
+state: inprogress
 ---
 
 Progress spinners (loading indicators) show the user that a longer-lasting action is being carried out.  

From e3d084a608fb233b42aa361d781782fc2d82fc4a Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 29 Sep 2022 13:35:22 +0200
Subject: [PATCH 6/7] chore: corrected those URLs

---
 .pa11yci | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/.pa11yci b/.pa11yci
index 2e7b724aa44..c7079c2e4dd 100644
--- a/.pa11yci
+++ b/.pa11yci
@@ -124,11 +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-01-loading-indicator-size-XS/elements-loading-indicator-01-loading-indicator-size-XS.rendered.html",
-		"http://127.0.0.1:8080/patterns/elements-loading-indicator-02-loading-indicator-size-s/elements-loading-indicator-02-loading-indicator-size-s.rendered.html",
-		"http://127.0.0.1:8080/patterns/elements-loading-indicator-03-loading-indicator-size-m/elements-loading-indicator-03-loading-indicator-size-m.rendered.html",
-		"http://127.0.0.1:8080/patterns/elements-loading-indicator-04-loading-indicator-size-l/elements-loading-indicator-04-loading-indicator-size-l.rendered.html",
-		"http://127.0.0.1:8080/patterns/elements-loading-indicator-05-loading-indicator-size-XL/elements-loading-indicator-05-loading-indicator-size-XL.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",

From 3867b2cfbc5132ba2ea263cba8030140aba9a377 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Thu, 29 Sep 2022 13:36:06 +0200
Subject: [PATCH 7/7] chore: let's simplify this to reduce the amount of
 testcases

---
 tests/backstop.json | 27 +++------------------------
 1 file changed, 3 insertions(+), 24 deletions(-)

diff --git a/tests/backstop.json b/tests/backstop.json
index 4ae3ec33ccd..d71276a0b23 100644
--- a/tests/backstop.json
+++ b/tests/backstop.json
@@ -831,31 +831,10 @@
 			"onReadyScript": "puppet/clickAndHoverHelper.js"
 		},
 		{
-			"label": "Loading indicator Size XS",
-			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-XS/elements-loading-indicator-loading-indicator-size-XS.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-XS/elements-loading-indicator-loading-indicator-size-XS.rendered.html"
+			"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": "Loading indicator Size S",
-			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-s/elements-loading-indicator-loading-indicator-size-s.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-s/elements-loading-indicator-loading-indicator-size-s.rendered.html"
-		},
-		{
-			"label": "Loading indicator Size M",
-			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-m/elements-loading-indicator-loading-indicator-size-m.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-m/elements-loading-indicator-loading-indicator-size-m.rendered.html"
-		},
-		{
-			"label": "Loading indicator Size L",
-			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-l/elements-loading-indicator-loading-indicator-size-l.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-l/elements-loading-indicator-loading-indicator-size-l.rendered.html"
-		},
-		{
-			"label": "Loading indicator Size XL",
-			"url": "http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-xl/elements-loading-indicator-loading-indicator-size-xl.rendered.html",
-			"referenceUrl": "https://db-ui.github.io/core/patterns/elements-loading-indicator-loading-indicator-size-xl/elements-loading-indicator-loading-indicator-size-xl.rendered.html"
-		},
-
 		{
 			"label": "Progress",
 			"url": "http://127.0.0.1:8080/patterns/elements-progress-progress/elements-progress-progress.rendered.html",