just want to share a preloader progress bar

[AsKadir]

Hi, guys!

 

Just want to share my progress bar preloader,

I searched here a lot and find out that a lot of people asking for something like this.

 

It isn't perfect, but it can be easily editable.

I find the idea from here https://ihatetomatoes.net/a-simple-one-page-template-with-a-preloading-screen/,

but met some errors, so a little bit reworked it.

 

Thanks to the guy who hates tomatoes!

See the Pen QWbjMxQ by ChicagoJostik (@ChicagoJostik) on CodePen

[ZachSaucier]

Nice work! It reminds me of my old asset loaders, particularly the "Fill" one: https://github.com/ZachSaucier/Asset-Loading-Effects

[AsKadir]

2 hours ago, ZachSaucier said:

Nice work! It reminds me of my old asset loaders, particularly the "Fill" one: https://github.com/ZachSaucier/Asset-Loading-Effects

@ZachSaucier Thanks, Zach!

If you refresh your plugin and add gsap, I think everyone here will be using it!

[Shrug ¯\_(ツ)_/¯]

I saw this post the other day then forgot about it, but intended to mention another approach you might be interested in.

 

You could look into leveraging the Navigation Timing API.

https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

It has really good support https://caniuse.com/#feat=nav-timing

 

It allows you to give a good page (size/preload) representation. Somewhat odd that I don't really remember seeing it mentioned here?  ¯\_(ツ)_/¯

 

You could always hide it so you only see it once and not on page reload using localStorage, etc.,

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

 

So @AslanGoi maybe its somthing you would like to look into or consider also.

 

 

[AsKadir]

@Shrug ¯\_(ツ)_/¯ That exactly what I'm trying to find!

Thanks a lot!

[Shrug ¯\_(ツ)_/¯]

You're welcome, you might gain something from this example which uses Navigation Timing API.

https://codepen.io/ahsanrathore/post/accurate-page-progress-bar

 

Just ditch the use of JQuery and CSS animation, instead using GSAP!  😀

 

Let us know if you make something fun.

[OSUblake]

6 hours ago, Shrug ¯\_(ツ)_/¯ said:

You're welcome, you might gain something from this example which uses Navigation Timing API.

https://codepen.io/ahsanrathore/post/accurate-page-progress-bar

 

Interesting. I've never seen that API before, but I see that it's just an estimate. I was playing around with that demo, and there were many times where it failed. The progress would reach 100 and fade away, but the image was still loading.

[Shrug ¯\_(ツ)_/¯]

@OSUblake I was hoping you would chime in when I posted about this approach. Thats kind of why I stated it the way I did above (good page (size/preload) representation) its not perfect but workable in many cases. Honestly you don't really see much discussion throughout the web for this approach, rather odd to me as it dates back quite a ways and has good support. 

 

So would you suggest implimenting something additional with this approach to make it more failsafe and accurate? Since you were previously unaware of it, I would be curious with what you would come up with once you dig into it and Blake-ify it.

[OSUblake]

19 hours ago, Shrug ¯\_(ツ)_/¯ said:

So would you suggest implimenting something additional with this approach to make it more failsafe and accurate? Since you were previously unaware of it, I would be curious with what you would come up with once you dig into it and Blake-ify it.

 

I probably wouldn't use that approach at all. I know it provides a smoother looking progress bar animation, but it's not accurate, so you would probably have to stop it at like 99%, and check if is fully loaded, and then wait for the load to complete if it's not. I hate it when progress bars just sit there and hang on 99% for a couple of seconds. It makes me think something went wrong.

 

And I didn't test, but I'm assuming that technique won't work if you dynamically load stuff, like with ajax, or inside a single page app.

 

I guess if you want a smooth animation, you could do an indeterminate progress bar, like #2 here.

 

 

[Shrug ¯\_(ツ)_/¯]

3 hours ago, OSUblake said:

• I probably wouldn't use that approach at all. 
• And I didn't test

 

😉 😜 Thats pretty definitive, but thanks for your overall input on it.

[alex89]

On 2/14/2020 at 2:27 PM, AsKadir said:

Hi, guys!

 

Just want to share my progress bar preloader,

I searched here a lot and find out that a lot of people asking for something like this.

 

It isn't perfect, but it can be easily editable.

I find the idea from here https://ihatetomatoes.net/a-simple-one-page-template-with-a-preloading-screen/,

but met some errors, so a little bit reworked it.

 

Thanks to the guy who hates tomatoes!

Greetings friend very good

[GSAP Helper]

@alex89 We'd love to help, but I'm not sure what exactly you're asking - can you clarify and provide a minimal demo?

 

Here are some tips that will increase your chances of getting a relevant answer:

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.