how to make a dynamic loading bar

[Om Bhalodiya]

Hi, I’m new to GSAP and React.

I want to make a dynamic preloader that is based on actual loading progress, not on time or Math.random() values. The site includes images, videos, fonts, and normal DOM content.

Is there a way to track real loading progress and use that value to update a counter or progress bar?
How do you usually access or calculate those loading numbers in a React + GSAP setup?

Any simple guidance would be appreciated. Thanks!

[Cassie]

Personal opinion here is that it's 2026, there's no reason to have a loader. For most websites nowadays, by the time your JS loads and your GSAP animation starts, the page has fully loaded. Loading speeds should be in the ms for simple images, DOM content and video. If they're not, look into why rather than masking with a loader. 

People tend to use loaders nowadays as fun "intro animations" into the content, if they have a slow request to a server or third party service, or if they've got a very very asset and code heavy experiential site using three.js or unity.

Back in the day, when websites really were slow and loaders were needed, people used tiny tiny tiny gifs so that they loaded fast, before the other heavier images, third party scrips and JS.

That being said, if you have millions of monstrously large assets and a terrible connection, maybe something like this?

See the Pen azZNRKa?editors=0111 by GreenSock (@GreenSock) on CodePen.

[Om Bhalodiya]

Yes, you’re right — and I agree with your point.

But from my experience in India, things are still a bit different. Many people use 4G phones, have slow or unstable internet, or don’t have Wi-Fi everywhere. Because of that, assets don’t always load fast.

I’ve noticed that when a website doesn’t have a loader, sometimes images don’t load properly. It leaves empty spaces or broken image icons, which looks really bad. That’s why I decided to add a loader.

For me, it’s not about hiding performance problems. It’s about making sure all important assets are loaded before animations start, so nothing breaks. If there is going to be a wait anyway, a small GSAP animation makes it feel smoother and more intentional.

Also, a simple loader can add a modern and premium feel to the site. I’m not very strong at design yet, but right now I’m learning GSAP, and building loaders helps me understand animations, timing, and loading flow better.

So in my case, the loader is more about better experience, stability, and learning — not just decoration.

 

I’d honestly love to share my thoughts and help you improve.

 

[Rodrigo]

Hi,

 

Maybe you can have a look at this:

https://gsap.com/resources/fouc/

 

As for things being missing, as Cassie mentions if your site has a large amount of images and assets then a preloader could be needed, you'll have to be the judge of that. I made a fair share of loaders in my time and my approach was always to have a fixed number of assets and API calls, ie, know how many images and API calls your site has and create an array of those, preload the images and use async code for the API calls and create a callback to increase a number and when that number is equal to the array length means all the assets are loaded and you can remove the preloader screen. What you want to do as a preloader? There is no limit for that you can go from the basic bar and percentage indicator to logo animations with SVG to crazy shaders stuff.

 

Happy Tweening!

[GreenSock]

Yeah, the most correct and efficient way (as far as I know) would require you to have an Array of ALL the assets and the size (kilobytes) ahead of time and then track their loading progress and do the math. Otherwise, you'd have to wait for all the assets to start loading and the server to respond with each and every one's size before you could figure out the percentage progress. You could easily map the overall progress to the scaleX of the loading bar (and animate it with GSAP of course). It's not really something we can do for you here, but hopefully laying out the concept helps move you in the right direction. 

 

Good luck!