AsKadir Posted February 14, 2020 Share Posted February 14, 2020 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 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 14, 2020 Share Posted February 14, 2020 Nice work! It reminds me of my old asset loaders, particularly the "Fill" one: https://github.com/ZachSaucier/Asset-Loading-Effects 1 Link to comment Share on other sites More sharing options...
AsKadir Posted February 14, 2020 Author Share Posted February 14, 2020 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! 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 22, 2020 Share Posted February 22, 2020 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. 3 1 Link to comment Share on other sites More sharing options...
AsKadir Posted February 22, 2020 Author Share Posted February 22, 2020 @Shrug ¯\_(ツ)_/¯ That exactly what I'm trying to find! Thanks a lot! Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 22, 2020 Share Posted February 22, 2020 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. 4 Link to comment Share on other sites More sharing options...
OSUblake Posted February 23, 2020 Share Posted February 23, 2020 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. 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 23, 2020 Share Posted February 23, 2020 @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. Link to comment Share on other sites More sharing options...
OSUblake Posted February 23, 2020 Share Posted February 23, 2020 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. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 24, 2020 Share Posted February 24, 2020 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. 1 Link to comment Share on other sites More sharing options...
alex89 Posted February 26 Share Posted February 26 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 26 Share Posted February 26 @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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now