title: jquery plugin Pace.js not working
body: <p>i am using jquery plugin pace.js, and i want that when the page is load then first the progress bar is loaded after that the content will shown,
  this is my code</p>
  
  <pre><code>&lt;div class="pace  pace-inactive"&gt;
      &lt;div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"&gt;
          &lt;div class="pace-progress-inner"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="pace-activity"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the <a href="http://jsfiddle.net/msz900/59caubpx/" rel="nofollow">jsfiddle</a> will define the result of my work. </p>
  
  <p>in my case the content and progress bar both will show simultaneously. </p>
  
  <p><strong>What i want:</strong> i want that first the progress bar will show and after the complition of progress bar the content will show like in <a href="http://www.spab-rice.com/themeforest/pond/demo/index.html" rel="nofollow">this</a> website.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>This is what i try next but when the progress is complete then it will not show any contents...</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;bk&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/pace-atom.css"/&gt;
        &lt;style&gt;
           #contents {
               display: none;
           }
           .cover {
               position: fixed;
               left: 0px;
               top: 0px;
               width: 100%;
               height: 100%;
               z-index: 1999;
               background:rgb(33,33,33);
           }
        &lt;/style&gt;
     &lt;/head&gt;
     &lt;body class="pace-done"&gt;
        &lt;div class="pace  pace-inactive"&gt;
           &lt;div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;"&gt;
              &lt;div class="pace-progress-inner"&gt;&lt;/div&gt;
           &lt;/div&gt;
           &lt;div class="pace-activity"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div&gt;
           &lt;div id="contents"&gt;
              &lt;img src="d3.jpg" alt=""/&gt;
              &lt;img src="d1.jpg" alt=""/&gt;
              &lt;img src="d2.jpg" alt=""/&gt;
              &lt;img src="d2.jpg" alt=""/&gt;
              &lt;img src="d1.jpg" alt=""/&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;script src="js/pace.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
           $(function() {
               Pace.on("done", function(){
                   $("#contents").fadeIn(1000);
               });
           }
  
        &lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>