Pré-Amorçage De L'Écran De Chargement Pour Angular2
Je suis à la recherche d'un pré-amorçage de l'écran de chargement le long des lignes de cet exemple mais pour Angular2.
- StackOverflow décourage question sur ressources externes. Quel est le problème avec seulement l'aide de l'un, vous avez évoqué?
- Le problème, c'est que c'est Angulaire 1.x, c'est ce qui est le problème.
Vous devez vous connecter pour publier un commentaire.
Je peux vous proposer un simple CSS approche.
Tout d'abord ajouter
.loading
div dans la page HTML principale, il devrait suivre l'application principale composante. Par exemple:Maintenant, vous pouvez cibler et le style de l'écran de démarrage avec
my-app:empty + .loading
sélecteur CSS, et la faire disparaître dès que l'application obtient bootstraped. Exemple:Cette approche fonctionne mieux si vous mettez tous les scripts avant la fermeture de balise body et laisser juste minime styles nécessaires à l'écran de chargement de la tête, alors il se montre dès que possible, puis les scripts de démarrage pour charger.
Ici est une simple démo:
Démo: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview
my-app
est pas vide de plus en est pas complètement chargé :transition: opacity 0 ease-in-out 1s;
Je suis allé avec une approche simple (je l'ai fait comme les autres réponse bien trop) à l'aide de FontAwesome toupies:
Pourquoi ne pas essayer cette approche:
Vous pouvez faire quelque chose comme ceci:
HTML:
Approche très simple. Et bien sûr, vous pouvez remplacer le texte avec l'image de chargement.
je suppose que la meilleure approche est d'avoir le style en ligne dans le chargement HTML div (montrer). Puis dans le css vous avez une classe à se cacher et à utiliser le ngOnInit d'inclure cette catégorie dans la div de chargement.
Dans ce cas, nous allons avoir le rendu html du style tout d'abord.. montrant le chargement et après tout (télécharger css et exécuter js) la classe qui la cache.
JS:
CSS:
HTML:
Que je devais prendre la visibilité des composants à l'intérieur de l'angle de vue, parce qu'ils ont été chargés sans aucun style lorsque la charge (comme flickr sans style). Donc dans le css, je me cache et dans la app.html je montre
CSS:
HTML: