I work with pace , the page loader, and it works great. But I can’t understand how to hide the whole page except the loading bar when the page loads, and show it after the download is complete. Any ideas?
I know this is a kind of old post, but I came across this question only now and realized another possible solution :)
The documentation hidden in Pace is Pace.on (). You can use it to bind to events listed in documents, for example:
Pace.on("done", function(){ $(".cover").fadeOut(2000); });
I solved this using the following code.
.pace-running > *:not(.pace) { opacity:0; }
as a display: none of them caused alignment problems on google maps on the page. this works fine and you need to add a little transition to this.
You do not need to hide the page. Just create a fixed element that will close your page without showing it, and then disappear with the loading function.
$(window).load(function() { $(".cover").fadeOut(2000); }) .cover { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1999; background:rgb(33,33,33); }
And you can add the downloadable .gif file or something to the container, it will disappear when your page is fully loaded.
Pace.js actually adds a class to the body. The “pace-move” is added when the pace is active, replaced by the pace when it ends.
Then you can specify css:
.pace-running{ opacity: .67; background-color: #2E2E2E; }
You can edit the above code to suit your needs.
I know this question is pretty old, but I managed to get this to work with one small block of CSS.
.pace-running > *:not(.pace) { display: none; }
This uses the class that PACE places on the <body> element at page load time. Note that this may cause the page to disappear during long AJAX requests ... Perhaps you will bypass this by doing Javascript to check the .pace-running class that needs to be removed from the <body> element. If you do not have XHR requests, you should be fine with this.
<body>
.pace-running
Try this with an example of simple and simple ....
<body> <div id="pagecontent"> Loaded asdasdas das das dasd asd asdasdasdasdasdasdasdasdasd </div> </body>
after this css was based on what you specified in the entire container ID
#pagecontent { opacity: 0; } #pagecontent { -webkit-transform: opacity 0.5s ease; -moz-transform: opacity 0.5s ease; -o-transform: opacity 0.5s ease; -ms-transform: opacity 0.5s ease; transform: opacity 0.5s ease; } body.pace-running #pagecontent { opacity: 0; } body.pace-done #pagecontent { opacity: 1; } .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2000; position: fixed; margin: auto; top: 0; left: 0; right: 0; bottom: 0; height: 5px; width: 200px; background: #fff; border: 1px solid #f2851f; overflow: hidden; } .pace .pace-progress { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: translate3d(0, 0, 0); -moz-transition: translate3d(0, 0, 0); -ms-transition: translate3d(0, 0, 0); -o-transition: translate3d(0, 0, 0); transition: translate3d(0, 0, 0); max-width: 200px; position: fixed; z-index: 2000; display: block; position: absolute; top: 0; right: 100%; height: 100%; width: 100%; background: #f2851f; } .pace.pace-inactive { display: none; }
FYR:
http://jsfiddle.net/686rugps/
If you decide not to use opacity, you can try:
.pace-running { background: rgba(250,250,250, 1); color: rgba(200,200,200, 1); }
Smaller code needed to reduce the visibility or hide the background page when starting Pace.js