How do I integrate the pace.js Preloader in webflow

Design help General
1

Hey People!

I want to use the pace.js preloader for my webflow site (https://github.hubspot.com/pace/docs/welcome/). I read here in the forums that it should be possible - but I haven’t found exact information on how to use it within webflow.

Does anybody here know how I integrate it into my project? Which code-snippets do I need and where do I place them within my project? Or is it something I do after exporting the code?

Thanks for your help!

2

Hello @Holger_H,

I believe you need to use a CDN to link your website to the javascript:
https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js

Javascript
You could implement the above link in your project custom code setting before the </body> tag like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

CSS
Then you need to choose one theme and link to the css file accordingly. You could implement the chosen css in your project custom code setting after the <head> tag like so:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-barber-shop.min.css">

A full list of css theme is to be found here:

Hope that helps.

3

Hey @anthonysalamin

thanks a lot for the quick help :)! It works like this :pray:

Maybe two more questions regarding finetuning:

  • At the pace.js website it’s possible to change the color of the loading bar - you can download the script after chosing a color. Any idea where to place this script?
  • And: Right now the content of my page is already visible when the loading bar still moves. Any idea how to hide the websites content while the page is still loading?

Many thanks!

4

Hello,

The script you are refering is only css.

If you wish to use those styles, I believe there is no need to implemenent the css style sheet like I previously suggested.

To implement your custom style, simply copy the code and wrap it within the <style> tag like so:

<style>
/* paste your css code below this line */
</style>

Also, it looks like pace need to be reffered as soon as possible to detect the loading progress.

You might want to try copy the javascript in the head as well. Your entire code would look like this right after the <head> tag:

 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />

or if you wish to use custom css:

<script src="/pace/pace.js"></script>
<style>
/* pate your css code below this line */
</style>

Note:
replace the /pace/pace.js respectively /pace/themes/pace-theme-barber-shop.css by one of the CDN full path provided here

Hope that helps

1 Like
5

Hey @anthonysalamin!

yeah …thanks a lot! This really helped out.

For hiding the websites content till it has been loaded I found this script:

Pace.on("done", function(){
    $(".cover").fadeOut(2000);
});

I just made a div above all my content and gave it the id “cover”. Now the div fades out when everything is loaded and the content becomes visible. That’s what I wanted.

Thanks again for your time! Huge help! :slight_smile:

1 Like