Community forum for knowledge and support

Updated 9 months ago

Loader 4 issues and preview not working

At a glance

The community members are discussing issues with the Loader 4 component from the Relume library. The preview for the component is not working on the Relume site, and the component is not functioning properly when imported into a project. The community members share a read-only link to a project where the Loader 4 animation was added, and they discuss the steps taken to implement the component. They determine that the instructions for the component may not have been included when it was pasted into the project. After further troubleshooting, a community member provides a solution by editing the animation's initial state and class name, which fixes the issue.

Useful resources

Does anyone know if there is a bug/issues with Loader 4? The preview isn’t working on the Relume library site and it also doesn’t work upon importing into my project.

G
M
M
23 comments

Would you mind sending a read-only link?

how did you insert this loader 4 component? Where did you copy it from?

so did you see these instructions or no? (genuine question, not snarky, tone online is hard! 🙂)

at any rate, you'll need to follow these instructions for it to work properly - I'm curious to understand further why you didn't see these instructions or if you were just quick to delete - one known bug is when importing from the new Webflow app - the instructions do not come with the pasted component - so thats something we'll have to address.

potentially from site builder, maybe these instructions didnt come with either

but from the library/chrome extension, in my testing, they came with

i did follow those instructions. when I first pasted the component in, the loader component element maintained the original name. in any case it still didn’t work.

Upon repasting the loader 4 animation in order to share with you, the loader 4 component element was renamed. however, the loader 4 elements referened in the animation code weren’t changed.

In any case, the component didn’t work the first time and is not working now either.

I’ve tested the 4 other loader animations, following the instructions and they all work as well

and to answer your first question, yes the instructions were included when I pasted the loader 4 component into the project

alright....well on your read-only link, the first step in the instructions is to put this component inside of page-wrapper, but there is no page-wrapper on that page you had mentioned.

I don’t know if there is some sort of dependency issue with the js components, but since the preview for loader 4 isn’t working on the relume site either, I’m wondering if the issue may be related to that?

yeah totally possible

are you able to confirm that the component works on a test project that you have perchance?

the dependency URL's load code, so not likely

I am furthering my troubleshooting now yeah

any luck getting the loader 4 animation to work in your test project?

nope - something in the JS doesn't seem to be triggering correctly. I'll pass it onto the team - thanks for raising the issue.

Hey , can you edit the animation called ‘Loader 4 [Hide] [Desktop]’ inside .loader4_ix-trigger? The initial state was set to display:none and should be set to display:flex. Also, after that, change the class name of the component again to .loader4_component. Let me know if this helps! 🙂

issue fixed! thank you very much to you and for looking into this

Add a reply
Sign up and join the conversation on Slack