how to control the load speed of pace.js and also how to hide content of the page when loader is running ?

how to control the load speed of pace.js and also how to hide content of the page when loader is running ?

hey guys i was just trying to use pace.js to add a page pre-loader , and basically the way this plugin works is that , you just add the  pace.js file to your page and add any css theme that pace.js provides , see here . 

now i did this , but my problem is , nowhere in the plugin docs have they specified how to control the load timing for the plugin , now , how do i actually control the load timing for the preloader plugin ? 

see fiddle . 

the doc says the following about this plugin :: 
=========================================================================

Include pace.js and the theme css of your choice on your page (as early as is possible), and you're done!

Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

If you use AMD or Browserify, require in pace.js and call pace.start() as early in the loading process as is possible.

=========================================================================

but now how do i actually control the load timing of the plugin , the other problem is the contents of the page are visible when the preloader is loading , why ? does the plugin provide a mechanism to hide the page contents while the plugin loads or is that on me ? 

thank  you.