I added a splash screen to my Angular Application and it works.
However, I want to know if it is possible to show the splash screen also while the global css file is loading.
As you can see in the snippet below Angular adds the <link> automatically to the index.html file and therefore the whole global css file (files defined in angular.json) is loaded before the app shows the splash screen.
<!doctype html>
<html lang="en">
<head>
<script type="module" src="/@vite/client"></script> <!-- ADDED BY ANGULAR -->
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<style>
<!-- styles for splash screen only -->
</style>
<link rel="stylesheet" href="styles.css"> <!-- ADDED BY ANGULAR -->
</head>
<body>
<div id="splash" aria-hidden="true">
<h1 id="splash-name">My Cool App</h1>
<div id="splash-bar" />
</div>
<app-root></app-root>
<script src="main.js" type="module"></script> <!-- ADDED BY ANGULAR -->
</body>
</html>