JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loadingWrap">
            <div id="loadingIcon">
                <i class="glyphicon glyphicon glyphicon-cog spin">Q</i>
            </div>
        </div>

CSS

/* beautiful loading screen */
            #loadingWrap{
                width: 100%;
                height: 100%;
                top: 0px;
                z-index: 250;
                background-color: rgba(255, 255, 255, 0.46);
            }
            .glyphicon.spin {
                font-size: 36px;
                -webkit-animation: spin 1.822s infinite linear;
                -moz-animation: spin 1.822s infinite linear;
                -o-animation: spin 1.822s infinite linear;
                animation: spin 1.822s infinite linear;
                -webkit-transform-origin: 50% 58%;
                transform-origin:50% 58%;
                -ms-transform-origin:50% 58%; /* IE 9 */
                line-height: 0px;
            }

            @-moz-keyframes spin {
                from {    -moz-transform: rotate(0deg);  }
                to {    -moz-transform: rotate(360deg);  }
            }

            @-webkit-keyframes spin {
                from {-webkit-transform: rotate(0deg);}
                to {-webkit-transform: rotate(360deg);}
            }
            @keyframes spin {
                from { transform: rotate(0deg); }
                to {transform: rotate(360deg); }
            }
            #loadingIcon {
                z-index: 10;
                position: absolute;
                right: 20px;
                bottom: 20px;
                line-height: 0px;
            }