feat: added loading indicator (circular spinner)

.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",

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

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.

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
+);

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>

source/_patterns/01-elements/loading-indicator/loading-indicator.json

@@ -0,0 +1,3 @@
+{
+	"aria-description": "Example description for loading spinner"
+}

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;
+	}
+}

source/_patterns/01-elements/loading-indicator/loading-indicator~size-S.md

@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size S
+order: 2
+---

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"
+}

source/_patterns/01-elements/loading-indicator/loading-indicator~size-XS.md

@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size XS
+order: 1
+---

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"
+}

source/_patterns/01-elements/loading-indicator/loading-indicator~size-l.md

@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size L
+order: 4
+---

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"
+}

source/_patterns/01-elements/loading-indicator/loading-indicator~size-m.md

@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size M
+order: 3
+---

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"
+}

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"
+}

source/_patterns/01-elements/loading-indicator/loading-indicator~size-xl.md

@@ -0,0 +1,4 @@
+---
+title: Loading Indicator Size XL
+order: 5
+---

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 */

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",