Jump to content
GreenSock

Mukhriddin

how can I implement preloader while I have no images on the project?

Recommended Posts

Hi there!

How can I make a 'fake' preloader to load content? I have no images or links to be loaded. Just need a preloader with percentage loading. Once the loader reaches 100%, Content to be loaded text appears

See the Pen XWZYqpR by Mukher (@Mukher) on CodePen

Link to comment
Share on other sites

Hi there Mukhriddin,

 

I assume this is a pen you've found online because it's using old GSAP syntax and has a structure in place to hook up to the progress of loading images. If you're not loading images you just need a timeline. My advice would be to start from scratch, don't follow this pen as it's going to just confuse things.

Just start by planning out the steps of your animation and then creating them on a timeline.

 

e.g.

 

1 - Scale up progress bar from 0 to 100

2 - fade out progress bar

3 - fade in - 'content loaded' text

 

 

If you have GSAP specific questions about that, pop back with a minimal demo!

  • Like 2
Link to comment
Share on other sites

On 6/4/2022 at 3:08 PM, Cassie said:

Hi there Mukhriddin,

 

I assume this is a pen you've found online because it's using old GSAP syntax and has a structure in place to hook up to the progress of loading images. If you're not loading images you just need a timeline. My advice would be to start from scratch, don't follow this pen as it's going to just confuse things.

Just start by planning out the steps of your animation and then creating them on a timeline.

 

e.g.

 

1 - Scale up progress bar from 0 to 100

2 - fade out progress bar

3 - fade in - 'content loaded' text

 

 

If you have GSAP specific questions about that, pop back with a minimal demo!

Hi Cassie!

Could you please, give me a shot in code here. I really don't have an idea how to implement it. 

See the Pen PoQdGjy by mshakhriyorov (@mshakhriyorov) on CodePen

I hope you understand me)

Link to comment
Share on other sites

Hi @Mukhriddin

  1. If you have no images, what's the point of your "preloader progress"? Like...what are you basing the amount on? For example if it's at 50%, what does that even mean? 50% of what?
  2. It's not clear at all what you want the preloader to look like, so there's no way we can offer tips on how you'd code it. For example, is it a circle that draws a line in a clockwise fashion? Or a huge bar that fills the screen left-to-right, etc.?
  3. These forums are for GSAP-specific questions. Unfortunately, we can't provide "build-to-order" solutions where you give us a list of requirements and we do the work of building it for free. We'd love to answer any GSAP-specific questions, though. 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×