Create a (Font)Awsome Loading... page

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>&nbsp;Loading...
  </p>
</app-root>

Happy loading/waiting...

PS: You can see such a spinner in action in the Spring Boot banner generator.

Show Comments