Angular2 Spinner beim Start

Aus vielen Winkel 2 Beispiele finden wir diesen Code in index.html:Angular2 Spinner beim Start

<app>loading</app>

Dies ist Benutzer zu sagen, dass die Anwendung JavaScripts im Browser nicht hier sind noch, so jetzt die Browser Laden Sie einfach diesen "Laden" Text

Ich frage mich, wie wir diesen Text ändern können eine tatsächliche Spinner-Komponente. Das heißt, wie wird eine Spinner-Komponente angezeigt, wenn der Browser noch die JavaScripts der Anwendung lädt?

(Ein Beispiel für das Endergebnis wäre, was u sehen, wenn u LinkedIn.com besuchen. Bevor Sie alle Inhalte geladen sehen, u zuerst sehen alle nur diese zu blinken leeren Boxen.)

Quelle

2017-08-29 Marlon Ou

prüfen https://stackoverflow.com/questions/35243443/pre-bootstrap-loading-screen-for-angular2 –

können Sie einen font-awesome Spinner https://www.w3schools.com/icons/fontawesome_icons_spinner.asp –

tun Sie Möchten Sie einen Spinner für jede Seite laden oder nur für das Laden der Zielseite? –

Was ich tue, ist einfach zeigen ein Spinner gif auf dem Bildschirm zentriert. Sie könnten einen font-awesome Spinner verwenden, wie @JonathanNiu erwähnt, oder irgendein anderes Symbol/Bild wirklich ...

<body> 
    <my-app> 
     <div class="loading-app"> 
      <img src="./public/img/spin.gif" /> 
     </div> 
    </my-app> 
</body>

und die CSS-Klasse, die Datei in meinem globalen Stil sitzt:

.loading-app { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
}

Quelle

2017-08-29 08:34:20

-1

Es gibt einen Spinner in Materialien von Angular.

https://material.angular.io/components/progress-spinner/overview

Quelle

2017-08-29 08:18:28 Swoox

Das Problem damit ist, dass Angular noch nicht geladen hat, also hilft es dem OP nicht wirklich. Entschuldigung, aber ich muss deine Antwort abstimmen. –

Entfernen Sie einfach den Ladevorgang und warten Sie, bis der Spinner in Ihrer App-Komponente fertig ist. – Swoox

Nicht sicher, was du meinst. Das OP möchte einen Spinner * anzeigen, während die JS-Dateien heruntergeladen werden und Angular selbst lädt (einschließlich Angular-Material, vorausgesetzt das OP verwendet es sogar) *. –

Angular2 Spinner beim Start

Antwort

Verwandte Themen