The following small index.html shows how to create a nice loading page.
We use the Font Awesome spinner.
But there are some alternatives:
To make the icon spin you need to add class fa-spin in addition to the standard class when using this font.
This results in the following snippet:
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
Or the overall index.html:
<!DOCTYPE html>
<head>
....
<style>
.spinner {
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
....
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
</head>
....
<app-root>
<p class="spinner">
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i> Loading...
</p>
</app-root>
Happy loading/waiting...
PS: You can see such a spinner in action in the Spring Boot banner generator.