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>
    .spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href=""/>
    <link rel="stylesheet" href=""/>

  <p class="spinner">
    <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>&nbsp;Loading...

Happy loading/waiting...

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

Show Comments