aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/misc
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-02-20 10:16:04 +0100
committerChocobozzz <me@florianbigard.com>2019-02-20 10:16:04 +0100
commitb28e4e5e080646ec67363cb0a16c9bd97ccffb35 (patch)
treea1af72cd2b0c7138bcaa4cb5f44e5db6d168e05d /client/src/app/shared/misc
parent28c8e63e55cad24b024fc1d05aa1cfc0257434e5 (diff)
downloadPeerTube-b28e4e5e080646ec67363cb0a16c9bd97ccffb35.tar.gz
PeerTube-b28e4e5e080646ec67363cb0a16c9bd97ccffb35.tar.zst
PeerTube-b28e4e5e080646ec67363cb0a16c9bd97ccffb35.zip
Add user notification animation
Diffstat (limited to 'client/src/app/shared/misc')
-rw-r--r--client/src/app/shared/misc/loader.component.html9
-rw-r--r--client/src/app/shared/misc/loader.component.scss45
-rw-r--r--client/src/app/shared/misc/loader.component.ts3
-rw-r--r--client/src/app/shared/misc/small-loader.component.html3
-rw-r--r--client/src/app/shared/misc/small-loader.component.ts11
5 files changed, 67 insertions, 4 deletions
diff --git a/client/src/app/shared/misc/loader.component.html b/client/src/app/shared/misc/loader.component.html
index 38d06950e..b8b7ad343 100644
--- a/client/src/app/shared/misc/loader.component.html
+++ b/client/src/app/shared/misc/loader.component.html
@@ -1,3 +1,8 @@
1<div id="video-loading" *ngIf="loading"> 1<div *ngIf="loading">
2 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div> 2 <div class="lds-ring">
3 <div></div>
4 <div></div>
5 <div></div>
6 <div></div>
7 </div>
3</div> 8</div>
diff --git a/client/src/app/shared/misc/loader.component.scss b/client/src/app/shared/misc/loader.component.scss
new file mode 100644
index 000000000..ddb64f07a
--- /dev/null
+++ b/client/src/app/shared/misc/loader.component.scss
@@ -0,0 +1,45 @@
1@import '_variables';
2@import '_mixins';
3
4// Thanks to https://loading.io/css/ (CC0 License)
5
6.lds-ring {
7 display: inline-block;
8 position: relative;
9 width: 50px;
10 height: 50px;
11}
12
13.lds-ring div {
14 box-sizing: border-box;
15 display: block;
16 position: absolute;
17 width: 44px;
18 height: 44px;
19 margin: 6px;
20 border: 4px solid;
21 border-radius: 50%;
22 animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
23 border-color: #999999 transparent transparent transparent;
24}
25
26.lds-ring div:nth-child(1) {
27 animation-delay: -0.45s;
28}
29
30.lds-ring div:nth-child(2) {
31 animation-delay: -0.3s;
32}
33
34.lds-ring div:nth-child(3) {
35 animation-delay: -0.15s;
36}
37
38@keyframes lds-ring {
39 0% {
40 transform: rotate(0deg);
41 }
42 100% {
43 transform: rotate(360deg);
44 }
45}
diff --git a/client/src/app/shared/misc/loader.component.ts b/client/src/app/shared/misc/loader.component.ts
index f37d70c85..e3b1eea3a 100644
--- a/client/src/app/shared/misc/loader.component.ts
+++ b/client/src/app/shared/misc/loader.component.ts
@@ -2,10 +2,9 @@ import { Component, Input } from '@angular/core'
2 2
3@Component({ 3@Component({
4 selector: 'my-loader', 4 selector: 'my-loader',
5 styleUrls: [ ], 5 styleUrls: [ './loader.component.scss' ],
6 templateUrl: './loader.component.html' 6 templateUrl: './loader.component.html'
7}) 7})
8
9export class LoaderComponent { 8export class LoaderComponent {
10 @Input() loading: boolean 9 @Input() loading: boolean
11} 10}
diff --git a/client/src/app/shared/misc/small-loader.component.html b/client/src/app/shared/misc/small-loader.component.html
new file mode 100644
index 000000000..5a7cea738
--- /dev/null
+++ b/client/src/app/shared/misc/small-loader.component.html
@@ -0,0 +1,3 @@
1<div *ngIf="loading">
2 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
3</div>
diff --git a/client/src/app/shared/misc/small-loader.component.ts b/client/src/app/shared/misc/small-loader.component.ts
new file mode 100644
index 000000000..191877f14
--- /dev/null
+++ b/client/src/app/shared/misc/small-loader.component.ts
@@ -0,0 +1,11 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-small-loader',
5 styleUrls: [ ],
6 templateUrl: './small-loader.component.html'
7})
8
9export class SmallLoaderComponent {
10 @Input() loading: boolean
11}