Skip to content

Commit 21763ff

Browse files
dopenguindopenguin
authored
Merge pull request #159 from Dataport/feature/custom-loading-indicator
Add loader styles
2 parents 9282d8e + 79b91a2 commit 21763ff

23 files changed

+650
-31
lines changed

‎packages/plugins/LoadingIndicator/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
## unpublished
44

55
- Refactor: Remove redundant prop-forwarding by only using one component.
6+
- Feature: Add new optional parameter `loaderStyle` to choose between different loader styles.
7+
- Feature: Add new mutation `setLoaderStyle` to choose between different loader styles at runtime.
68

79
## 1.1.0
810

‎packages/plugins/LoadingIndicator/README.md

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ A generic loading indicator that may be used by any plugin or outside procedure
66

77
## Configuration
88

9+
### loadingIndicator
10+
11+
| fieldName | type | description |
12+
| - | - | - |
13+
| loaderStyle | enum['CircleLoader', 'BasicLoader', 'none', 'RingLoader', 'RollerLoader', 'SpinnerLoader', 'v-progress-linear']? | Choose between different loader styles. Defaults to 'v-progress-linear' (Vuetify loader). |
14+
915
For details on the `displayComponent` attribute, refer to the [Global Plugin Parameters](../../core/README.md#global-plugin-parameters) section of `@polar/core`.
1016

1117
Example configuration:
@@ -26,18 +32,39 @@ map.$store.commit('plugin/loadingIndicator/addLoadingKey', key)
2632
map.$store.commit('plugin/loadingIndicator/removeLoadingKey', key)
2733
```
2834

29-
![Loading indicator example](./readme_loadingIndicator_example.png)
30-
3135
The key must be unique and is kept track of via a Set. It can't be added multiple times, and removing it once always removes it altogether. It is advised to use a key like `{my-plugin-or-application-name}-{procedure-name}` to avoid name conflicts. The LoadingIndicator will usually be used for asynchronous code.
3236

3337
As such, **always call `removeLoadingKey` in the `finally` section of your code** to prevent hanging loading indicators.
3438

39+
```js
40+
// change loader style at runtime
41+
map.$store.commit('plugin/loadingIndicator/setLoaderStyle', loaderStyle)
42+
```
43+
44+
#### Supported `loaderStyle` options
45+
46+
<table align="center">
47+
<tr align="center">
48+
<td width="33%" align="center"><img src="./assets/VuetifyLoader.gif" alt="v-progress-linear" height="120px" style="object-fit: none;"><div>v-progress-linear</div></td>
49+
<td width="33%" align="center"><img src="./assets/BasicLoader.gif" alt="BasicLoader" height="120px" style="object-fit: contain;"><div>BasicLoader</div></td>
50+
<td width="33%" align="center"><img src="./assets/RingLoader.gif" alt="RingLoader" height="120px" style="object-fit: contain;"><div>RingLoader</div></td>
51+
</tr>
52+
<tr align="center">
53+
<td width="33%" align="center"><img src="./assets/RollerLoader.gif" alt="RollerLoader" height="120px" style="object-fit: contain;"><div>RollerLoader</div></td>
54+
<td width="33%" align="center"><img src="./assets/CircleLoader.gif" alt="CircleLoader" height="120px" style="object-fit: contain;"><div>CircleLoader</div></td>
55+
<td width="33%" align="center"><img src="./assets/SpinnerLoader.gif" alt="SpinnerLoader" height="120px" style="object-fit: contain;"><div>SpinnerLoader</div></td>
56+
</tr>
57+
</table>
58+
59+
It is also possible to choose `none` as a `loaderStyle` to hide the loader.
60+
3561
### Getters
3662

3763
You may desire to listen to whether the loader is currently being shown.
3864

3965
| fieldName | type | description |
4066
| - | - | - |
67+
| loaderStyle | string | The current loader style. |
4168
| showLoader | boolean | Whether the layer is currently shown. |
4269

4370
```js

‎packages/plugins/LoadingIndicator/assets/BasicLoader.gif

24.3 KB
Loading

‎packages/plugins/LoadingIndicator/assets/CircleLoader.gif

25.4 KB
Loading

‎packages/plugins/LoadingIndicator/assets/RingLoader.gif

85.2 KB
Loading

‎packages/plugins/LoadingIndicator/assets/RollerLoader.gif

26.9 KB
Loading

‎packages/plugins/LoadingIndicator/assets/SpinnerLoader.gif

57.8 KB
Loading

‎packages/plugins/LoadingIndicator/assets/VuetifyLoader.gif

2.31 KB
Loading

‎packages/plugins/LoadingIndicator/readme_loadingIndicator_example.png

-1.09 KB
Binary file not shown.

‎packages/plugins/LoadingIndicator/src/components/LoadingIndicator.vue

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,19 @@
22
<div v-if="showLoader">
33
<v-card>
44
<v-card-text>
5-
{{ $t('common:plugins.loadingIndicator.loading') }}
6-
<v-progress-linear indeterminate color="primary" class="mb-0" />
5+
<v-container>
6+
<v-row justify="center">
7+
{{ $t('common:plugins.loadingIndicator.loading') }}
8+
</v-row>
9+
<v-row v-if="loaderStyle !== 'none'">
10+
<component
11+
:is="loaderStyle"
12+
indeterminate
13+
color="primary"
14+
class="mb-0"
15+
/>
16+
</v-row>
17+
</v-container>
718
</v-card-text>
819
</v-card>
920
</div>
@@ -12,11 +23,23 @@
1223
<script lang="ts">
1324
import Vue from 'vue'
1425
import { mapGetters } from 'vuex'
26+
import RollerLoader from './loaderStyles/Roller.vue'
27+
import CircleLoader from './loaderStyles/Circle.vue'
28+
import SpinnerLoader from './loaderStyles/Spinner.vue'
29+
import RingLoader from './loaderStyles/Ring.vue'
30+
import BasicLoader from './loaderStyles/Basic.vue'
1531
1632
export default Vue.extend({
1733
name: 'LoadingIndicator',
34+
components: {
35+
RollerLoader,
36+
CircleLoader,
37+
SpinnerLoader,
38+
RingLoader,
39+
BasicLoader,
40+
},
1841
computed: {
19-
...mapGetters('plugin/loadingIndicator', ['showLoader']),
42+
...mapGetters('plugin/loadingIndicator', ['showLoader', 'loaderStyle']),
2043
},
2144
})
2245
</script>

‎packages/plugins/LoadingIndicator/src/components/loaderStyles/Basic.vue

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<template>
2+
<div class="lds-default">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
<div></div>
8+
<div></div>
9+
<div></div>
10+
<div></div>
11+
<div></div>
12+
<div></div>
13+
<div></div>
14+
<div></div>
15+
</div>
16+
</template>
17+
18+
<script lang="ts">
19+
import Vue from 'vue'
20+
21+
/**
22+
* This loader is the lds-default loader from https://loading.io/css/.
23+
* It was renamed to BasicLoader to avoid confusion with the default loader.
24+
*/
25+
26+
export default Vue.extend({
27+
name: 'BasicLoader',
28+
})
29+
</script>
30+
31+
<style lang="scss" scoped>
32+
.lds-default {
33+
/* change color here */
34+
color: var(--polar-primary);
35+
}
36+
.lds-default,
37+
.lds-default div {
38+
box-sizing: border-box;
39+
}
40+
.lds-default {
41+
display: inline-block;
42+
position: relative;
43+
width: 80px;
44+
height: 80px;
45+
}
46+
.lds-default div {
47+
position: absolute;
48+
width: 6.4px;
49+
height: 6.4px;
50+
background: currentColor;
51+
border-radius: 50%;
52+
animation: lds-default 1.2s linear infinite;
53+
}
54+
.lds-default div:nth-child(1) {
55+
animation-delay: 0s;
56+
top: 36.8px;
57+
left: 66.24px;
58+
}
59+
.lds-default div:nth-child(2) {
60+
animation-delay: -0.1s;
61+
top: 22.08px;
62+
left: 62.29579px;
63+
}
64+
.lds-default div:nth-child(3) {
65+
animation-delay: -0.2s;
66+
top: 11.30421px;
67+
left: 51.52px;
68+
}
69+
.lds-default div:nth-child(4) {
70+
animation-delay: -0.3s;
71+
top: 7.36px;
72+
left: 36.8px;
73+
}
74+
.lds-default div:nth-child(5) {
75+
animation-delay: -0.4s;
76+
top: 11.30421px;
77+
left: 22.08px;
78+
}
79+
.lds-default div:nth-child(6) {
80+
animation-delay: -0.5s;
81+
top: 22.08px;
82+
left: 11.30421px;
83+
}
84+
.lds-default div:nth-child(7) {
85+
animation-delay: -0.6s;
86+
top: 36.8px;
87+
left: 7.36px;
88+
}
89+
.lds-default div:nth-child(8) {
90+
animation-delay: -0.7s;
91+
top: 51.52px;
92+
left: 11.30421px;
93+
}
94+
.lds-default div:nth-child(9) {
95+
animation-delay: -0.8s;
96+
top: 62.29579px;
97+
left: 22.08px;
98+
}
99+
.lds-default div:nth-child(10) {
100+
animation-delay: -0.9s;
101+
top: 66.24px;
102+
left: 36.8px;
103+
}
104+
.lds-default div:nth-child(11) {
105+
animation-delay: -1s;
106+
top: 62.29579px;
107+
left: 51.52px;
108+
}
109+
.lds-default div:nth-child(12) {
110+
animation-delay: -1.1s;
111+
top: 51.52px;
112+
left: 62.29579px;
113+
}
114+
@keyframes lds-default {
115+
0%,
116+
20%,
117+
80%,
118+
100% {
119+
transform: scale(1);
120+
}
121+
50% {
122+
transform: scale(1.5);
123+
}
124+
}
125+
</style>

‎packages/plugins/LoadingIndicator/src/components/loaderStyles/Circle.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="lds-circle"><div></div></div>
3+
</template>
4+
5+
<script lang="ts">
6+
import Vue from 'vue'
7+
8+
export default Vue.extend({
9+
name: 'CircleLoader',
10+
})
11+
</script>
12+
13+
<style lang="scss" scoped>
14+
.lds-circle {
15+
color: var(--polar-primary);
16+
}
17+
.lds-circle,
18+
.lds-circle div {
19+
box-sizing: border-box;
20+
}
21+
.lds-circle {
22+
display: inline-block;
23+
transform: translateZ(1px);
24+
}
25+
.lds-circle > div {
26+
display: inline-block;
27+
width: 64px;
28+
height: 64px;
29+
margin: 8px;
30+
background: currentColor;
31+
border-radius: 50%;
32+
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
33+
}
34+
@keyframes lds-circle {
35+
0%,
36+
100% {
37+
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
38+
}
39+
0% {
40+
transform: rotateY(0deg);
41+
}
42+
50% {
43+
transform: rotateY(1800deg);
44+
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
45+
}
46+
100% {
47+
transform: rotateY(3600deg);
48+
}
49+
}
50+
</style>

‎packages/plugins/LoadingIndicator/src/components/loaderStyles/Ring.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<div class="lds-ring">
3+
<div></div>
4+
<div></div>
5+
<div></div>
6+
<div></div>
7+
</div>
8+
</template>
9+
10+
<script lang="ts">
11+
import Vue from 'vue'
12+
13+
export default Vue.extend({
14+
name: 'RingLoader',
15+
})
16+
</script>
17+
18+
<style lang="scss" scoped>
19+
.lds-ring {
20+
/* change color here */
21+
color: var(--polar-primary);
22+
}
23+
.lds-ring,
24+
.lds-ring div {
25+
box-sizing: border-box;
26+
}
27+
.lds-ring {
28+
display: inline-block;
29+
position: relative;
30+
width: 80px;
31+
height: 80px;
32+
}
33+
.lds-ring div {
34+
box-sizing: border-box;
35+
display: block;
36+
position: absolute;
37+
width: 64px;
38+
height: 64px;
39+
margin: 8px;
40+
border: 8px solid currentColor;
41+
border-radius: 50%;
42+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
43+
border-color: currentColor transparent transparent transparent;
44+
}
45+
.lds-ring div:nth-child(1) {
46+
animation-delay: -0.45s;
47+
}
48+
.lds-ring div:nth-child(2) {
49+
animation-delay: -0.3s;
50+
}
51+
.lds-ring div:nth-child(3) {
52+
animation-delay: -0.15s;
53+
}
54+
@keyframes lds-ring {
55+
0% {
56+
transform: rotate(0deg);
57+
}
58+
100% {
59+
transform: rotate(360deg);
60+
}
61+
}
62+
</style>

0 commit comments

Comments
 (0)