JSFiddle - React, Tailwind, and code Playground

by erlenmasson

HTML

<body>
    <!-- Place Directly Under the Opening "body" Tag -->
    <div class="" id="preloader">
        <blockquote>Default Quote</blockquote> <cite>Default Cite</cite>

    </div>
    <script type="text/javascript">
        // Adds a "loading" Class to the Preloader
        document.getElementById('preloader').className += 'loading';
    </script>
    <p>Lorem ipsum ante in varius dui tortor senectus scelerisque vivamus posuere, aliquam odio rutrum cubilia rutrum taciti et fames vel ornare augue etiam justo.</p>
</body>

CSS

#preloader {
    background: #000;
    height: 100%;
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    background-image: url(http://loadinggif.com/generated-image?imageId=9&bgColor=%23000000&fgColor=%23ffffff&transparentBg=0&download=0&random=0.4457789873704314);
    background-position: 50% 20%;
    background-repeat:no-repeat;
    z-index: 999;
    margin: 0;
    padding: 0;
}
#preloader.loading {
    /* Displays Preloader When "loading" Class Present */
    display: block;
}
#preloader blockquote {
    color: #fff;
    display: block;
    font-size: 30px;
    margin: 0;
    text-align: center;
    border: none;
    margin: 15% 0 2% 0;
    padding: 0;
}
#preloader cite {
    color: #fff;
    display: block;
    font-size: 15px;
    text-align: center;
    border: none;
    margin: 0;
    padding: 0;
}

JavaScript

// Display Random Blockquotes and Cites 


// Create Quotes Array
var quotes = [];

// The List of Quotes!
quotes[0] = "Quote One";
quotes[1] = "Quote Two";
quotes[2] = "Quote Three";
quotes[3] = "Quote Four";

// Assign the Variable "quote" with a Random Quotation from Above

var quote = quotes[Math.floor(Math.random() * quotes.length)];

// Alter the Current (Default) Quote Text with a Random Quote
$('#preloader blockquote').text(quote);

// Create Cites Array
var cites = [];

// The List of Cites
cites[0] = "- Cite One";
cites[1] = "- Cite Two";
cites[2] = "- Cite Three";
cites[3] = "- Cite Four";

// Assign the Variable "cite" with a Random Cite from Above

var cite = cites[Math.floor(Math.random() * cites.length)];


// Alter the Current (Default) Cite Text with a Random Quote
$('#preloader cite').text(cite);



// All Code Inside Here Will Get Executed After 5 Seconds
setTimeout(function () {
    $('#preloader').fadeOut(2500, function () {
        $('#preloader').removeClass('loading');
    });
}, 2500);