Demostración simple aquí: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview (utilicé la aplicación de demostración oficial angular.io/docs)
El problema es: la primera animación del cargador de pantalla (utilicé loader.svg) se congela por un segundo durante la carga inicial de la aplicación Angular
El proceso es así: abra la página, la animación del cargador svg comienza -> la animación del cargador se congela -> la animación del cargador se reinicia -> la aplicación angular termina de cargarse, el cargador está oculto
En esta demostración, la congelación es más obvia: http://iarouse.com/dist-angular2-material/v1/
<my-app> <!-- the loader --> <div id="loader-container"></div> </my-app>Mi aplicación real es más grande y la animación del cargador inicial se congela durante unos segundos durante el proceso de arranque, lo cual es frustrante
¿Algo que pueda hacer para que quede suave?
Tuve tu problema porque estaba renderizando una imagen gif giratoria. Probé la solución publicada por @bviale y funcionó.
Simplemente usó el código que se encuentra en https://www.w3schools.com/howto/howto_css_loader.asp y lo puso entre la etiqueta app-root .
Usando la demostración: https://plnkr.co/edit/IA0Bs5VH9WwVbLlKPQ6X?p=preview
Si coloco el siguiente script al final después de que finalice, veo que el cargador se ejecuta sin problemas sin interrupción, porque veo muchos errores en la consola.
<script src="https://unpkg.com/core-js/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script> <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>ejemplo de error del que estoy hablando:
GET https://unpkg.com/core-js@3.6.5/client/shim.min.js net::ERR_ABORTED 404Y después de mover la secuencia de comandos tras el cuerpo, su index.html se ve a continuación:
<!DOCTYPE html> <html> <head> <script>document.write('<base href="' + document.location + '" />');</script> <title>Angular Tour of Heroes</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfills --> <script src="systemjs.config.js"></script> <script> System.import('main.js').catch(function(err){ console.error(err); }); </script> </head> <body> <my-app> <div id="loader-container"></div> </my-app> <script src="https://unpkg.com/core-js/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.8.4?main=browser"></script> <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script> </body> </html>