How to edit custome loader?

Philip Fong wrote:

If third party code needed, please show me what are they and where to put it.

Hi, you need to put HTML code into your_app_name.html in the app directory folder inside the body after full-screen div’s.Put CSS code into your_app_name.css after at the end of the document. Don’t forget to create s special div that will be as a container for your loader with a special id, don’t put code directly in the body of the html. You will be also to create Init puzzle to hide standard loader.

Philip Fong wrote:

Thanks, but sound complicated, I’ll just use a gif animation to hide the loader, since the intention is to keep the audience engaged before they run out of patience.

We made an entire video explanation of the whole process about making a preloader, we will release it soon in a few says, even maybe today.

loom wrote:

Hi, i was already watching the russian version. since i dont speak russian, its hard to follow all steps. Any chance to download the webflow files to study ? i think i did everything right – i got:
“v3d.AppPuzzles has been deprecated. Use v3d.PuzzlesLoader instead.”

this would be very helpful…

We already made a translation, just need to publish it, it will be during this working day, but here’s a link to the webflow .

loom wrote:

Thanks for the link, still dont get it to work. will wait for the english Version of the video.

We published it. Here’s a link.

my css file:

.preloader_div {
position: fixed;
width: 100%;
height: 100%;
}

.div-block-4 {
position: absolute;
left: 0px;
top: 40%;
right: 0px;
display: block;
width: 300px;
height: 300px;
margin-right: auto;
margin-left: auto;
background-color: #d3d3d3;
}

.div-block-6 {
position: relative;
z-index: 2;
width: 0%;
height: 100%;
float: left;
background-color: #4a9f94;
}

.div-block-5 {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
background-image: url(‘./images/logo_loader.svg’);
background-position: 0px 0px;
background-size: contain;
}

.text-block {
position: absolute;
left: 0px;
top: 64%;
right: 0px;
font-family: Arial, ‘Helvetica Neue’, Helvetica, sans-serif;
color: #868686;
font-size: 20px;
font-style: normal;
text-align: center;
}

.body {
background-color: transparent;
font-size: 20px;
}

loom wrote:

why is he changeing 2 times the image path at 13:37 ?

Just because I changed font after I’ve already inserted a code into html, so I swithced to webflow, made changes and replaced old code with new one and made changes to the same path two times.

loom wrote:

At 12:35 we have div blocks named “preloader_screen”

They was. created on 2:06

loom wrote:

“preloader-bar” etc…

Created on 6:10

Here’s a files

Hi Mikhauil, after study the sample i got i to work – thanks.