title: Bootstrap: overlay loading screen + toggle jumbotron
body: <p>Ok so, I've gone through maybe 20 different stackexchange answers to each of these problems, and I still can't solve it, so it's about time I ask and hopefully somebody can point me out of these woods:</p>
  
  <p>I am making a simple website, and I wanted to make like an overlay screen that contains a loading/progress bar, and just progresses over the course of 3 seconds at most before it fades away and reveals the site. I also wanted to add a logo in the middle of it just above the bar. I looked at some video in arabic, but it got out of hand sort of, I didn't know what he was saying, but I thought I could try his code and modify it, but that didn't work either. </p>
  
  <p>Also, I've got a jumbotron in the code I call "jumbotronTwo", and basically what it is supposed to do is that when you click the menu icon and the dropdown menu appears, you click on one of the options, and then the menu should scroll back and the jumbotron should appear. So far I've just been able to make the jumbotron itself and color it, resize it, fill it with text etc., I tried using some javascript and jquery to make it appear and disappear "onclick", but none seemed to work, i'm starting to think maybe it has to do with what libraries I've got?
  I have no idea what could be trumping it, so I need somebody to take a look at the code.</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Twenty Eight Interiors&lt;/title&gt;
          &lt;meta name="description" content="Wiredwiki App"&gt;
          &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
  
  
      &lt;/head&gt;
  </code></pre>
  
  <p>I think these up here are important to show, in case I forgot some library or something so you can point it out. I've got some CSS as well but cut it out, if you need to see it too I can show it. Here's the "meat and potatoes":</p>
  
  <pre><code>    &lt;body&gt;
          &lt;!-- jumbotron--&gt;
  
          &lt;div class="jumbotron" id="jumbotronOne"&gt;
              &lt;div class="container text-center"&gt;
                  &lt;img src="Untitled.png"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;!-- Navbar --&gt;
          &lt;nav class="navbar navbar-inverse" id="my-navbar" style="font-family:Webdings;"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header" id="oneDiv"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse" id="iconButton"&gt;
                          &lt;span class="glyphicon glyphicon-menu-hamburger"&gt;&lt;/span&gt;
                      &lt;/button&gt;
  
                  &lt;a href="" class="navbar-brand"&gt;&lt;font color="white"&gt;MENU&lt;/font&gt;&lt;/a&gt;
                  &lt;/div&gt;&lt;!-- Navbar Header --&gt;
                  &lt;div class="collapse navbar-collapse" id="navbar-collapse" align="center"&gt;
                      &lt;ul class="nav navbar-nav" id="firstOne"&gt;
                          &lt;li&gt;&lt;a href="#" id="designProcess" role="button"&gt;Design Process&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" id="profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" id="contactInfo"&gt;Contact Info&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="list-inline" id="secondOne"&gt;
                          &lt;li&gt;&lt;a href="#" class="socialicon"&gt;&lt;img src="facebook.png" hspace="30"&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="socialicon"&gt;&lt;img src="twitter.png" hspace="30"&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="socialicon"&gt;&lt;img src="instagram.png" hspace="30"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- End Container img src="twitter.png"--&gt;
          &lt;/nav&gt;&lt;!-- End navbar --&gt;
  
        &lt;div class="jumbotron" id="jumbotronTwo"&gt;
        &lt;div class="container"&gt;
        &lt;h2&gt;Headline goes here in one, two or three lines like this&lt;/h1&gt;
        &lt;p&gt;...&lt;/p&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt; 
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I even had problems with making the javascript work for the glyphicon, I want it to change when I click it, and again; i have no idea what I'm doing wrong, tried lots of potential solutions from stackexchange, but this too seems to point to that it's something else.</p>
  
  <p>Thanks in advance</p>