JSFiddle - React, Tailwind, and code Playground

by Mike McBride

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="messenger">
    <span class="fa-stack fa-5x">
        <i class="fa fa-cloud fa-stack-2x"></i>
        <i class="fa fa-refresh fa-inverse fa-stack-1x fa-spin"></i>
    </span>
    <p class="title">Submitting</p>
    <p class="content">Please be patient... this can take a few seconds</p>
</div>
<div class="messenger-overlay"></div>

CSS

.messenger {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 85%;
    z-index: 2000;
    text-align: center;
}
.messenger p {
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #fff;
}
.messenger .title {
    font-size: 28px;
}
.messenger .content {
    font-size: 16px;
}
.messenger-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
}
.fa-cloud {
    color: rgba(0,180,60,0.8);
}