JSFiddle - React, Tailwind, and code Playground

Overlay with centered text and animation

by bitstarr

HTML

<div class="loading-overlay">
    <div class="loading-overlay-inner">
        <div class="loading-overlay-contents">
            <div class="loading-overlay-body">
                <strong class="loading-overlay-title">We're almost ready for takeoff</strong>
                <div class="loading-overlay-symbol">
                    <div class="picto">&#9992;</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body { font: 1em/1.5 sans-serif;}

.loading-overlay {
    z-index: 40000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: #bab6ae;
    background: #333333;
    background: rgba(51, 51, 51, 0.92);
}
.loading-overlay-inner {
    display: table;
    position: relative;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 100%;
}
.loading-overlay-contents {
    display: table-cell;
    vertical-align: middle;
    padding: 50px;
}
.loading-overlay-body {
    position: relative;
    display: inline-block;
    max-width: 70%;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    -ms-perspective: 300px;
    -o-perspective: 300px;
    perspective: 300px;
}

.loading-overlay-title { text-transform: uppercase; }

.loading-overlay-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    font-size: 2em;
    -webkit-animation: loading-overlay-animation 9s infinite linear;
    -moz-animation: loading-overlay-animation 9s infinite linear;
    -ms-animation: loading-overlay-animation 9s infinite linear;
    -o-animation: loading-overlay-animation 9s infinite linear;
    animation: loading-overlay-animation 9s infinite linear;
}
.loading-overlay-symbol .picto {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    text-shadow: 0 0 9px rgba(0,0,0,.7);
}

@keyframes loading-overlay-animation { 
    0% {
        -webkit-transform: rotate(0deg) translate(0, -6em);
        -moz-transform: rotate(0deg) translate(0, -6em);
        -ms-transform: rotate(0deg) translate(0, -6em);
        -o-transform: rotate(0deg) translate(0, -6em);
        transform: rotate(0deg) translate(0, -6em); }
    100% {
        -webkit-transform: rotate(360deg) translate(0, -6em);
        -moz-transform: rotate(360deg) translate(0, -6em);
        -ms-transform: rotate(360deg) translate(0, -6em);
        -o-transform: rotate(360deg) translate(0, -6em);
        transform: rotate(360deg)...