stackoom
  简体   繁体   中英

mat-spinner is not showing while loading angular app-root in index.html

 原文  2018-12-11 06:39:05  0   4    node.js/ angular/ angular-material

Question

Requirement:

I want to show a <mat-spinner> while loading the <app-root> in Angular

Code tried:

index.html:

<body>
  <app-root>Loading ...
    <mat-spinner></mat-spinner>
  </app-root>
</body>

app.module.ts:

import {
   ...,
   MatProgressSpinnerModule,
   ... }from '@angular/material';

@NgModule({
  declarations: [
  ...
  ],
  imports: [
    ...,
    MatProgressSpinnerModule,
    ...
  ],
  ...
})

Version info:

Angular CLI: 6.2.2
Node: 10.5.0
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Result:

Its showing Loading... but not showing <mat-spinner> , tried spinner alone as well as with "Loading..." text as given above, but the result is same - <mat-spinner> doesn't show.

Am I missing anything here?

4 answers

solution1
 4  2019-01-17 15:51:31

While application initially loads angular hasn't loaded the App module yet so it doesn't know what mat-spinner is at that point.

You would need to use something that's is not angular if you want to show any thing before the modules are loaded. Your best shot would be a gif-spinner

solution2
 3 ACCPTED  2018-12-11 07:38:58

I used a custom css and class to achieve that. All this code is inside the index.html

<style>
    @-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

.spinner{
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}
.center-page{
    display: flex;
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    align-items: center;
    text-align: center;
}

.pulse {
  animation: pulsate 1s ease-out;
  -webkit-animation: pulsate 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 1.0
}


@keyframes pulsate {
  0% {opacity: 1.0;}
  49% {opacity: 1.0;}
  50% {opacity: 0.0;}
  100% {opacity: 0.0;}
}
</style>

<body>
    <my-app>
        <div class="center-page">
            <img class="spinner rotating" src="yourImageToRotate.png">
        </div>
    </my-app>
</body>

The result is this image rotating endlessly

在此处输入图像描述

I've also used, in some project, a pure css spinner and it works like this: 

 <style>.center-page{ display: flex; width:calc(100vw - 40px); height:calc(100vh - 40px); align-items: center; text-align: center; }.sk-cube-grid { width: 40px; height: 40px; margin-left: auto; margin-right: auto; }.sk-cube-grid.sk-cube { width: 33%; height: 33%; background-color: #333; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }.sk-cube-grid.sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid.sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid.sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }.sk-cube-grid.sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid.sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }.sk-cube-grid.sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }.sk-cube-grid.sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }.sk-cube-grid.sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }.sk-cube-grid.sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } </style>
 <div class="center-page"> <div class="sk-cube-grid"> <div class="sk-cube sk-cube1"></div> <div class="sk-cube sk-cube2"></div> <div class="sk-cube sk-cube3"></div> <div class="sk-cube sk-cube4"></div> <div class="sk-cube sk-cube5"></div> <div class="sk-cube sk-cube6"></div> <div class="sk-cube sk-cube7"></div> <div class="sk-cube sk-cube8"></div> <div class="sk-cube sk-cube9"></div> </div> </div>

solution3
 1  2020-04-10 11:45:30

As others have already answered; using an angular component does not work before your app has loaded. Instead of using a completely different spinner than angular material, you can take the approach of copying the markup and styles to reproduce it in the <app-root> of your index.html .

Here is a link to a gist that uses this approach: https://gist.github.com/DanRibbens/00dc9e971b0df9f58c3726885a2a59aa#file-index-html

solution4
 0  2018-12-11 07:29:27

Use <mat-spinner></mat-spinner> in app.component.html (template which has selector name app-root).

You can use ngIf condition to show spinner in template untill all the required things are ready to be shown. PFB the sample

app.component.html

<div *ngIf="isReady">
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
</div>
<mat-spinner *ngIf="!isReady"></mat-spinner>

app.component.ts

constructor(){
    setTimeout(() => {
      this.isReady = true;
    }, 5000);
  }

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular 2 'app-root' not loading on ExpressJS route angular 2 app-root not loading when running angular2 quick start only showing Loading .. not the content of index.html Different index.html for angular app no index.html after reloading angular app Why Angular 2 doesn't load default app-root component? How to point heroku hosting to angular app and index.html in subdirectory? Gulp: Index.html not loading stylesheet MeanJS - integrate Angular in index.html file angular index.html script shown
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM