Streaming live at 10am (PST)

Pre loader with custom image (logo) animation


#1

Hey guys,

is there a tool to include a pre loader with custom image (logo) animation. Something like this, but for loading the webpage.

I thought of pace.js, but since there is no possibility to insert your own logo or?
At the moment i use regular pace.js without any logo (see here), but with a kind of logo loading animation it would be more esthetic.

best,
maurice


#2

Hey @Maurice,

I'm visualising this in my head right now, how about placing a transparent text (designed in photoshop) as an overlay image on your div block (loader) placed on a parent div block.

For example;

  1. Overlay image (transparent text)
  2. Loader div
  3. Parent div (holds both elements).

Use the load trigger in interaction.

Let me know how it goes.

Best,
Naweed


#3

Hey @nwdsha,

do you think this is better than use these jquery libraries? The author of the loadgo plugin used pace.js to create this wordpress plugin these works great.

Pace.js works fine with webflow, the only questions how i combine it with loadgo and get it into webflow.

best,
maurice


#4

@Maurice

On a lazy day that's how I'll do it, but with a .gif loader instead :wink:

This will help you out for sure https://forum.webflow.com/t/how-to-embed-this-beautiful-pre-loader/42872/20

Best,
Naweed


#5

@nwdsha,

yeah but this loaders aren´t real loaders that check the exactly progress and show them in percentage.
Pace.js shows you the progress of the website loading in percentage. The only thing i would love to achieve, is instead of the progress bar to show the logo that color fills, like loadgo.

best,
maurice


#6

@Maurice,

Javascript isn't my strongest point, design solutions are. However, @samliew might be able to help you with this.

All the best,
Naweed


#7

@nwdsha,

thanks and hopefully @samliew can help me to get it running :smiley:

best,
maurice


#8

You're welcome @Maurice - I tried my best :wink:

Best wishes,
Naweed


#9

Can you attempt at following the documentation first? If you get stuck on any step, then that's when I may provide hints.


#10

Hey @samliew,

i followed the documentation and pace.js is working great for me (see here). But i want to replace the progress par with the logo like loadgo do it.


#11

I was referring to the other library, the one that supports custom logos.


#12

@samliew,

if you mean LoadGo library than i know how to use it. But only LoadGo ist not working as website page preloader. The library only animate the logo, the process information comes over pace.js.

I need to know how to connect these both libraries.


#13

Looks like you cannot hook into pacejs, as there are no "step" callback functions for each % of page load, to set LoadGo progress. There is only a start and end progress event.

Find a different plugin.


#14

@samliew,

yeah thats right, but in this post he explain more or less detailed how he did this for his wordpress plugin (loadgo wordpress).

But i don´t understand it completely.


#15

You have to modify an external script, which I do not support via the forums as I have a business to run too.

If the script has the option, I will be able to show you how to use/implement it.


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.