JSFiddle - React, Tailwind, and code Playground
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.push({"content": "Quote One", "cite": "- Cite One"});
quotes.push({"content": "Quote Two", "cite": "- Cite Two"});
quotes.push({"content": "Quote Three", "cite": "- Cite Three"});
quotes.push({"content": "Quote Four", "cite": "- Cite Four"});
var randomNumber = Math.floor(Math.random() * quotes.length);
// Alter the Current (Default) Quote Text with a Random Quote
$('#preloader blockquote').text(quotes[randomNumber]['content']);
// Alter the Current (Default) Cite Text with a Random Quote
$('#preloader cite').text(quotes[randomNumber]['cite']);
// All Code Inside Here Will Get Executed After 5 Seconds
setTimeout(function () {
$('#preloader').fadeOut(2500, function () {
$('#preloader').removeClass('loading');
});
}, 2500);