pathgather/please-wait

A simple library to show your users a beautiful splash page while your application loads.

please-wait's Issues

window.pleaseWait is not a function

Uncaught TypeError: window.pleaseWait is not a function at (index):17
when using cdnjs: https://cdnjs.cloudflare.com/ajax/libs/please-wait/0.0.5/please-wait.min.js

Litters body tag with pg-loaded classes

It seems that repeated starting and finish() calls to this plugin litters the body tag with excess pg-loaded classes. Reproducable on the demo page simply repeatedly close and re-open the demo and watch the body tag get bombarded with pg-loaded classes.

Good script but no maintenance release?

Hello, it's a good plugin for preloader but why it's no update from long time?

Disable logo

I have an issue where the logo doesn't load immediately and only actually appears just before loading my app is done.

Is there a way to disable the logo entirely and only use the html, I tried a couple of things but there is always an empty img tag added to the splash page!

Add option to enable full background mp4 video

This is a design trend for 2015. Full background videos on the intro page. Nice to have!

Is there anyway ton include this loading screen in a <div> for example ?

Hi , everything in the title , i want use you script in a video player container so don't want it in full screen .
Thanks you for your time

Loading screen won't close on Android default browser

As title says. It doesn't seem to show any javascript errors either, I believe.

ES6 import/require

Just wondering if this module is compatible with ES6-style imports. I've tried the following, with these corresponding results:

import pleaseWait from 'please-wait';
const loadingScreen = pleaseWait({ ... })
-> (0 , _pleaseWait2.default) is not a function

const pleaseWait = require('please-wait');
const loadingScreen = pleaseWait({ ... })
-> pleaseWait is not a function

Youtube embed will cause please-wait not to close

Embedding

<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed?listType=search&autoplay=0&list=powerpoint" frameborder="0"/>

prevents Please Wait from closing.

It seems that using asynchronous Youtube API solves it.

Loading screen flashes when finishing

I'm seeing this in your demo and in my own app: when closing the loading screen it will flash white before fading out. I'm on Windows 10 and have tried the latest Chrome and Firefox.

css for spinners not included in Bower package

I just installed please-wait via Bower but the CSS for the spinners, in default.css on your demo site, is not included in the Bower package.

Maybe move the spinner and any other necessary CSS into another CSS file?

Cheers

Issue from updateLoadingHtml()

I use please-wait.js for showing progress.
But in case I want to change text of loading page, I call loading_screen.updateLoadingHtml("

Text

") but the text appeared at first disappeared and then next text is hidden.

Can you please tell me the reason and resolution?

Thanks in advance
Snowflake dev.

updateLoadingHtml isn't working

When I call updateLoadingHtml, with or without the "immediate" flag set to true, my loading html disappears and is not replaced with a new one. I've discovered that it is due to the pg-removing class not being removed and the html thus having opacity: 0.
I debugged the code and found that the listener that captures the animation event, calls the method _changeLoadingHtml() which removes the pg-removing class, but then immediately puts it back again. This seems a little odd. Am I missing something, or is this a bug?

Can you please share source code of demo

The function of getting a random sentence was very nice, could you please share how it is implemented? thanks. The ideal situation would be if the loading time is too long, the plugin starts to fetch these sentences and display them on a time basis. It would be really nice if this feature can be added.

Please add an option to embed a .swf in the loading screen

This way we can show a short video or animation about the app, so that visitors to the site know what the app is about and how to use it, before they even get there!

A nice video intro was really popular about twelve years ago. I wonder why people stopped doing it? Strange.

Not able to close in any browser

scope.Show = function() { window.loading_screen = window.pleaseWait({ logo:"http://api.ning.com/files/3dClu3zYZusfVojQVtAQJSlleasTbCK0wguJlqXDoAnV019BCyihQU6l1TpjhrxSOpuBsnILlOSgzZwoaFkSpPGluDm39lCs/bnationheader.png", backgroundColor: '#3366ff', loadingHtml: "

" }); window.setTimeout(function () { loading_screen.finish(); }, 3000); }

Please do an Angular 6+ version

How to transparent background

Hi,

I want use please-wait to block ui when request network, how can i do it?
Please help!

Loading Page Loaded After Some Elements

Hi,
Thanks for this great library but I am having some issue on loading the loader on Bootstrap. In my case the loader shows up few seconds after page and some elements appears on the screen!

Here is a Link of what happening.

Can you please let me know why this is happening? (As you can see the loader appears not first element on the page!)

Thanks

Controlling minimal display time

Thank you for this great library!
There seems to be a minimal display time before please-wait splash screen closes.
In case when my page loads really fast, I have to wait for splash screen for that time and only then will it dissapear. Is there any way to control that, to make it dissapear as soon as finish() is called, even if it that was very quickly after the creation of splash screen?
Thanks

Not working well on safari ?

I try to launch it with onSubmit or onclick on safari but not working ! but work perfectly on chrome and firefox ??

Adjust speed of animation

Is there a way to adjust the speed of the animation? I ask in order to use it as a loading panel while loading some data. That data takes between 200 and 500ms to load and will be loaded before the animation finishes, which means the animation slows the page down.

I tried using .finish(true), but that has the consequence of only showing a short flicker if the loading time is too short.

Web page jumping after preloader finished

After preloader finished, the whole page is slightly jumping towards left .(Issue is in your online also).

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Keep getting this error:

please-wait.min.js:12 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

I'll switch to the unminified version to pin point exactly where the error happens.

Thank you!

Percentage

how can i add the loaded percentage of any given page

Makes your application appear slow

When calling loadingScreen.finish() with no arguments, the loading screen will always be visible for at least 1300 ms even if your application loads instantly. This makes your application feel slow when it's really not!

Reproduction

https://github.com/srmagura/please-wait-is-slow

Workaround

Call finish(true) to hide the loading screen as soon as possible.

Recommended solution

Make your own loading screen. You really don't need a library for this. Here's mine if you need inspiration:

<style>
    @keyframes loadingScreenImageFadeIn {
        from { opacity: 0 }
        50% { opacity: 0 }
        to { opacity: 1 }
    }
    @keyframes loadingScreenTextFadeIn {
        from { opacity: 0 }
        66% { opacity: 0 }
        to { opacity: 1 }
    }
</style>
<div id="loadingScreen" style="position: absolute; background-color: white; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; top: 0; z-index: 10000;">
    <div>
        <img src="/images/logo.png" alt="My Company" style="animation: loadingScreenImageFadeIn 2s ease-in; margin-bottom: 3rem" width="250">
        <div style="animation: loadingScreenTextFadeIn 3s ease-in; font-size:1.5rem; color: #888; font-family: sans-serif; text-align: center">Loading...</div>
    </div>
</div>

Then when your application finishes loading:

document.getElementById('loadingScreen')?.remove()

Update documentation

A few issues were brought up:

• What's the usage in a modern ES6 environment?
• How to ensure the CSS files are added to the page when installing from NPM? Perhaps recommend something like style-loader from webpack.

Uncaught TypeError: Cannot read property 'classList' of null

Hi! great plugin!

I'm having this problem when loading in my app (w/angular), is very weird

Uncaught TypeError: Cannot read property 'classList' of null this message appear at the line 76 of the js file inside the removeClass function.

I also tried to create an index file, load everything (to discard problems with my app) but it's still happening

Any ideas?

Thanks in advance!

I'm having trouble installing it

Can I get step by step instructions on how to do it? I'm a bit new to HTML and all so I don't know much.

Callback

I've a lot of troubles adding please wait in a page with masonry. I could add the masonry after finish(), but I don't know how to add a callback function... Could you help me ?

This plugin is not good

Does not close the loading screen.

I put the loading_screen.finish() command in nested $(document).ready and window.onload and it doesn't work. Lost hundreds of potential clients because of this.