简柏林 / thingskit · Commits

Commit c9598a23ea3e8170f872b2c0c13a6964059076e5

Authored by Igor Kulikov
1 parent bc2d0452

UI: Introduce initial page loading spinner

Inline Side-by-side
Showing 3 changed files with 84 additions and 4 deletions
... ... @@ -17,4 +17,4 @@
17 17 -->
18 18 <!--The content below is only a placeholder and can be replaced.-->
19 19
20   -<router-outlet></router-outlet>
  20 +<router-outlet (activate)="onActivateComponent($event)"></router-outlet>
... ...
... ... @@ -62,7 +62,7 @@ export class AppComponent implements OnInit {
62 62 this.matIconRegistry.addSvgIconLiteral(
63 63 'alpha-e-circle-outline',
64 64 this.domSanitizer.bypassSecurityTrustHtml(
65   - '<svg viewBox="0 0 24 24"><path d="M9,7H15V9H11V11H15V13H11V15H15V17H9V7M12,2A10,10 0 0,'+
  65 + '<svg viewBox="0 0 24 24"><path d="M9,7H15V9H11V11H15V13H11V15H15V17H9V7M12,2A10,10 0 0,' +
66 66 '1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 ' +
67 67 '0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
68 68 )
... ... @@ -124,5 +124,11 @@ export class AppComponent implements OnInit {
124 124 ngOnInit() {
125 125 }
126 126
127   -}
  127 + onActivateComponent($event: any) {
  128 + const loadingElement = $('div#tb-loading-spinner');
  129 + if (loadingElement.length) {
  130 + loadingElement.remove();
  131 + }
  132 + }
128 133
  134 +}
... ...
... ... @@ -16,7 +16,7 @@
16 16
17 17 -->
18 18 <!doctype html>
19   -<html lang="en" style="width: 100%;">
  19 +<html lang="en" style="width: 100%; height: 100%;">
20 20 <head>
21 21 <meta charset="utf-8">
22 22 <title>ThingsBoard</title>
... ... @@ -24,8 +24,82 @@
24 24
25 25 <meta name="viewport" content="width=device-width, initial-scale=1">
26 26 <link rel="icon" type="image/x-icon" href="thingsboard.ico">
  27 + <style type="text/css">
  28 +
  29 + body, html {
  30 + height: 100%;
  31 + overflow: hidden;
  32 + background-color: rgb(250,250,250);
  33 + }
  34 +
  35 + .tb-loading-spinner {
  36 + margin: auto;
  37 + z-index: 1;
  38 + position: absolute;
  39 + top: 0;
  40 + bottom: 0;
  41 + left: 0;
  42 + right: 0;
  43 + width: 136px;
  44 + height: 30px;
  45 + text-align: center;
  46 + }
  47 +
  48 + .tb-loading-spinner > div {
  49 + width: 30px;
  50 + height: 30px;
  51 + margin-right: 10px;
  52 + background-color: rgb(43,160,199);
  53 +
  54 + border-radius: 100%;
  55 + display: inline-block;
  56 + -webkit-animation: tb-bouncedelay 1.4s infinite ease-in-out both;
  57 + -moz-animation: tb-bouncedelay 1.4s infinite ease-in-out both;
  58 + animation: tb-bouncedelay 1.4s infinite ease-in-out both;
  59 + }
  60 +
  61 + .tb-loading-spinner .tb-bounce1 {
  62 + -webkit-animation-delay: -0.32s;
  63 + -moz-animation-delay: -0.32s;
  64 + animation-delay: -0.32s;
  65 + }
  66 +
  67 + .tb-loading-spinner .tb-bounce2 {
  68 + -webkit-animation-delay: -0.16s;
  69 + -moz-animation-delay: -0.16s;
  70 + animation-delay: -0.16s;
  71 + }
  72 +
  73 + @-webkit-keyframes tb-bouncedelay {
  74 + 0%, 80%, 100% { -webkit-transform: scale(0) }
  75 + 40% { -webkit-transform: scale(1.0) }
  76 + }
  77 +
  78 + @-moz-keyframes tb-bouncedelay {
  79 + 0%, 80%, 100% { -moz-transform: scale(0) }
  80 + 40% { -moz-transform: scale(1.0) }
  81 + }
  82 +
  83 + @keyframes tb-bouncedelay {
  84 + 0%, 80%, 100% {
  85 + -webkit-transform: scale(0);
  86 + -moz-transform: scale(0);
  87 + transform: scale(0);
  88 + } 40% {
  89 + -webkit-transform: scale(1.0);
  90 + -moz-transform: scale(1.0);
  91 + transform: scale(1.0);
  92 + }
  93 + }
  94 +
  95 + </style>
27 96 </head>
28 97 <body class="tb-default">
29 98 <tb-root></tb-root>
  99 + <div id="tb-loading-spinner" class="tb-loading-spinner">
  100 + <div class="tb-bounce1"></div>
  101 + <div class="tb-bounce2"></div>
  102 + <div class="tb-bounce3"></div>
  103 + </div>
30 104 </body>
31 105 </html>
... ...