Skip to content

Commit e1cca1f

Browse files
annschmfranzke
annsch
and
mfranzke
authored
feat: added loading indicator (circular spinner) (#10)
* feat: added loading indicator (circular spinner) * Update CHANGELOG.md * fix: using pseudo patterns for loading indicator due to code review feedback * test: update backstop.json * Update _loading-indicator.md * chore: corrected those URLs * chore: let's simplify this to reduce the amount of testcases Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
1 parent 55320ce commit e1cca1f

19 files changed

+204
-0
lines changed

‎.pa11yci‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,12 @@
124124
"http://127.0.0.1:8080/patterns/elements-input-input-week/elements-input-input-week.rendered.html",
125125
"http://127.0.0.1:8080/patterns/elements-link-links/elements-link-links.rendered.html",
126126
"http://127.0.0.1:8080/patterns/elements-link-links-small/elements-link-links-small.rendered.html",
127+
"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator/elements-loading-indicator-loading-indicator.rendered.html",
128+
"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-XS/elements-loading-indicator-loading-indicator-size-XS.rendered.html",
129+
"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-s/elements-loading-indicator-loading-indicator-size-s.rendered.html",
130+
"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-m/elements-loading-indicator-loading-indicator-size-m.rendered.html",
131+
"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-l/elements-loading-indicator-loading-indicator-size-l.rendered.html",
132+
"http://127.0.0.1:8080/patterns/elements-loading-indicator-loading-indicator-size-xl/elements-loading-indicator-loading-indicator-size-xl.rendered.html",
127133
"http://127.0.0.1:8080/patterns/elements-progress-progress-circular-loader-dark-background/elements-progress-progress-circular-loader-dark-background.rendered.html",
128134
"http://127.0.0.1:8080/patterns/elements-progress-progress-circular-loader/elements-progress-progress-circular-loader.rendered.html",
129135
"http://127.0.0.1:8080/patterns/elements-progress-progress-dark-background/elements-progress-progress-dark-background.rendered.html",

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@ In general we've introduced the possibility to control variants and configuratio
8080
- The DB Webfonts files have been updated -->
8181

8282
## [Unreleased]
83+
84+
### Added
85+
86+
- Loading Indicator: introduced new Loadingindicator (Circular Loading Spinner)
87+
8388
## [2.0.0-48] - 2022-08-05
8489

8590
### Fixed

‎source/_patterns/01-elements/loading-indicator/_loading-indicator.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: loading
3+
state: inprogress
4+
---
5+
6+
Progress spinners (loading indicators) show the user that a longer-lasting action is being carried out.
7+
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.
8+
9+
## Accessibility
10+
11+
SVGs are often conveyed inconsistently to assistive technologies. The component’s accessibility is also highly contextual.
12+
For optimal user experience, use the aria-description prop to let assistive technology users know the purpose of the loading spinner.
13+
14+
### `aria-live` and dynamic creation of html content
15+
16+
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.
17+
18+
`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.
19+
20+
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.
21+
22+
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)
23+
24+
## Recommendations
25+
26+
### Do
27+
28+
If the application is waiting for a process, it makes sense to display an indicator in a central location.
29+
30+
### Don‘t
31+
32+
An indicator should not be used to visualize the application waiting for user input.

‎source/_patterns/01-elements/loading-indicator/_loading-indicator.variables.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "../../../css/db-ui-core.variables";
2+
3+
$db-spinner-sizes: (
4+
"xs": 20px,
5+
"s": 28px,
6+
"m": 36px,
7+
"l": 44px,
8+
"xl": 52px
9+
);

‎source/_patterns/01-elements/loading-indicator/loading-indicator.hbs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<svg
2+
class="elm-loadingindicator"
3+
viewBox="0 0 44 44"
4+
aria-labelledby="elm-loadingindicator__description" role="img"
5+
{{#if size }} data-size="{{ size }}"{{/if }}
6+
>
7+
<title id="elm-loadingindicator__description">{{aria-description}}</title>
8+
<circle
9+
class="elm-loadingindicator__circle"
10+
cx="22"
11+
cy="22"
12+
r="20"
13+
fill="none"
14+
stroke-miterlimit="10"
15+
></circle>
16+
</svg>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"aria-description": "Example description for loading spinner"
3+
}

‎source/_patterns/01-elements/loading-indicator/loading-indicator.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
@charset "utf-8";
2+
@use "sass:math";
3+
4+
@import "loading-indicator.variables";
5+
6+
.elm-loadingindicator {
7+
display: block;
8+
}
9+
10+
@mixin loadingindicator--sizes($prefix) {
11+
@each $size in (xl l m s xs) {
12+
$stroke-width: 3px;
13+
@if $size == s or $size == xs {
14+
$stroke-width: 2px;
15+
}
16+
//.#{$prefix}loadingindicator--size-#{$size} {
17+
&%size-#{$size} {
18+
--loadingindicator--stroke-width: #{math.div(
19+
44px,
20+
map-get($db-spinner-sizes, $size)
21+
) *
22+
$stroke-width};
23+
--loadingindicator--r: 19px;
24+
height: map-get($db-spinner-sizes, $size);
25+
width: map-get($db-spinner-sizes, $size);
26+
}
27+
}
28+
}
29+
30+
.elm-loadingindicator {
31+
color: $db-color-red-500;
32+
animation: loadingindicator-rotate 3s linear infinite;
33+
34+
@include loadingindicator--sizes("elm-");
35+
36+
@extend %size-m; // default
37+
38+
&[data-size="xs"] {
39+
@extend %size-xs;
40+
}
41+
&[data-size="s"] {
42+
@extend %size-s;
43+
}
44+
&[data-size="m"] {
45+
@extend %size-m;
46+
}
47+
&[data-size="l"] {
48+
@extend %size-l;
49+
}
50+
&[data-size="xl"] {
51+
@extend %size-xl;
52+
}
53+
}
54+
55+
.elm-loadingindicator__circle {
56+
r: var(--loadingindicator--r);
57+
stroke-dasharray: 1, 200;
58+
stroke-dashoffset: 0;
59+
stroke: currentcolor;
60+
stroke-width: var(--loadingindicator--stroke-width);
61+
animation: loadingindicator-stroke 1.5s ease-in-out infinite;
62+
stroke-linecap: round;
63+
}
64+
65+
@keyframes loadingindicator-rotate {
66+
100% {
67+
transform: rotate(360deg);
68+
}
69+
}
70+
71+
@keyframes loadingindicator-stroke {
72+
0% {
73+
stroke-dasharray: 1, 200;
74+
stroke-dashoffset: 0;
75+
}
76+
77+
50% {
78+
stroke-dasharray: 96, 200;
79+
stroke-dashoffset: -32;
80+
}
81+
82+
100% {
83+
stroke-dasharray: 96, 200;
84+
stroke-dashoffset: -124;
85+
}
86+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: Loading Indicator Size S
3+
order: 2
4+
---

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"size": "xs",
3+
"aria-description": "Example description for xs loading spinner"
4+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
title: Loading Indicator Size XS
3+
order: 1
4+
---

0 commit comments

Comments
 (0)