title: Display random quotes as a loading overlay using jquery
body: <p>I am looking to create a loading overlay for my website. Each time an internal link is clicked I would like to display an inspirational quote for a few seconds.</p>
  
  <p>After a few hours of research this is what I have found so far:</p>
  
  <p><strong>1. Different quote at random on page refresh?</strong></p>
  
  <p><a href="https://forum.jquery.com/topic/how-can-i-show-a-different-quote-at-random-on-page-refresh" rel="nofollow noreferrer">https://forum.jquery.com/topic/how-can-i-show-a-different-quote-at-random-on-page-refresh</a></p>
  
  <p>This is the exact question I am asking but I couldn't work out the solution to this discussion</p>
  
  <p><strong>2. A discussion on displaying random blockquotes</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/16657066/jquery-random-blockquote">jQuery random blockquote</a></p>
  
  <p>This is a good find for me but I need to add this to an loading / overlay effect for a few seconds.</p>
  
  <p>Can anyone help me? Thanks guys</p>
  
  <hr>
  
  <p><strong>-- UPDATE --</strong></p>
  
  <p>With a lot of help from friends, here is the best solution I have been able to come up with:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- Place Directly Under the Opening "body" Tag --&gt;
  &lt;div class="" id="preloader"&gt;
      &lt;blockquote&gt;Default Quote&lt;/blockquote&gt; &lt;cite&gt;Default Cite&lt;/cite&gt;
  
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      // Adds a "loading" Class to the Preloader
      document.getElementById('preloader').className += 'loading';
  &lt;/script&gt;
  &lt;p&gt;Lorem ipsum ante in varius dui tortor senectus scelerisque vivamus posuere, aliquam odio rutrum cubilia rutrum taciti et fames vel ornare augue etiam justo.&lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p>js:</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#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&amp;bgColor=%23000000&amp;fgColor=%23ffffff&amp;transparentBg=0&amp;download=0&amp;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;
  }
  </code></pre>
  
  <p><strong>-- PROBLEM --</strong></p>
  
  <p>The problem I have now is a random <strong>quote</strong> will be matched with a random <strong>cite</strong>. How can I get <strong>"Quote One"</strong> with match <strong>"Cite One"</strong>... and so on. I still would like them to display randomly if possible</p>
  
  <p>Here is a jsfiddle example <a href="http://jsfiddle.net/erlenmasson/24pEZ/" rel="nofollow noreferrer">http://jsfiddle.net/erlenmasson/24pEZ/</a></p>