JSFiddle - React, Tailwind, and code Playground

by thayllor

HTML

<div class="modalFrame">

</div>

CSS

.modalFrame {
    overflow: hidden;
    min-height: 550px;
    height: 100%;
    width: 100%;
    background: url('data:image/svg+xml;charset=utf-8,<svg version="1.1" width="450" height="100" margin="20px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 100" enable-background="new 0 0 0 0" xml:space="preserve"> <path fill="#1e7bbf" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> </path><text fill="#666" x="40%" y="60%" font-family="\'Lucida Grande\', sans-serif" font-size="24">Carregando</text> </svg>') 0px 0px no-repeat;
    background-position: center;
}

body{
    font-family: 'Roboto', sans-serif;
    overflow:hidden;
    background-color: #000000;
    text-align: center;
    height: 100vh;
}