Simple CSS/JS loading screen

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="loadingOverlay">
    <div class="loadingOverlay-inner">
        <span class="fa fa-spinner fa-spin"></span>
        <br/>
        Daten werden synchronisiert...
    </div>
</div>

SCSS

.loadingOverlay {
    box-shadow:inset 0 0 20px white;
    font-family:sans-serif;
    font-weight:lighter;
    background:#e3e3e3;
    text-align: center;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    .loadingOverlay-inner {
        width:95%;
        position:absolute;
        top:35%;
         text-align: center;
        color:#666;
        
    }
    .fa {
        font-size:40px;
        margin-bottom: 20px;
    }
}