dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Introduce initial page loading spinner

Browse Source
This commit is contained in:
Igor Kulikov 2020-12-03 14:09:48 +02:00
parent bc2d045257
commit c9598a23ea
3 changed files with 84 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/app.component.html
View File

@ -17,4 +17,4 @@
-->
<!--The content below is only a placeholder and can be replaced.-->
<router-outlet></router-outlet>
<router-outlet (activate)="onActivateComponent($event)"></router-outlet>

10
ui-ngx/src/app/app.component.ts
View File

@ -62,7 +62,7 @@ export class AppComponent implements OnInit {
this.matIconRegistry.addSvgIconLiteral(
'alpha-e-circle-outline',
this.domSanitizer.bypassSecurityTrustHtml(
'<svg viewBox="0 0 24 24"><path d="M9,7H15V9H11V11H15V13H11V15H15V17H9V7M12,2A10,10 0 0,'+
'<svg viewBox="0 0 24 24"><path d="M9,7H15V9H11V11H15V13H11V15H15V17H9V7M12,2A10,10 0 0,' +
'1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 ' +
'0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
)
@ -124,5 +124,11 @@ export class AppComponent implements OnInit {
ngOnInit() {
}
}
onActivateComponent($event: any) {
const loadingElement = $('div#tb-loading-spinner');
if (loadingElement.length) {
loadingElement.remove();
}
}
}

76
ui-ngx/src/index.html
View File

@ -16,7 +16,7 @@
-->
<!doctype html>
<html lang="en" style="width: 100%;">
<html lang="en" style="width: 100%; height: 100%;">
<head>
<meta charset="utf-8">
<title>ThingsBoard</title>
@ -24,8 +24,82 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="thingsboard.ico">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
background-color: rgb(250,250,250);
}
.tb-loading-spinner {
margin: auto;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 136px;
height: 30px;
text-align: center;
}
.tb-loading-spinner > div {
width: 30px;
height: 30px;
margin-right: 10px;
background-color: rgb(43,160,199);
border-radius: 100%;
display: inline-block;
-webkit-animation: tb-bouncedelay 1.4s infinite ease-in-out both;
-moz-animation: tb-bouncedelay 1.4s infinite ease-in-out both;
animation: tb-bouncedelay 1.4s infinite ease-in-out both;
}
.tb-loading-spinner .tb-bounce1 {
-webkit-animation-delay: -0.32s;
-moz-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.tb-loading-spinner .tb-bounce2 {
-webkit-animation-delay: -0.16s;
-moz-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes tb-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes tb-bouncedelay {
0%, 80%, 100% { -moz-transform: scale(0) }
40% { -moz-transform: scale(1.0) }
}
@keyframes tb-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>
</head>
<body class="tb-default">
<tb-root></tb-root>
<div id="tb-loading-spinner" class="tb-loading-spinner">
<div class="tb-bounce1"></div>
<div class="tb-bounce2"></div>
<div class="tb-bounce3"></div>
</div>
</body>
</html>