[Plugin: SimpleModal Login] gif spinner while loading

Thanks for the suggestion – I agree.

Here’s a bit of code that should do the trick:

– create a img folder and add a animated gif called loading.gif (WP ships with one under wp-admin/images.

– update simplemodal-login.php and add the following code after the <p class="submit">...</p> block of code:
<div class="simplemodal-login-loading" style="display:none"></div>

– update default.css and add:
#simplemodal-login-container .simplemodal-login-loading {background:url(../img/loading.gif) center no-repeat; height:20px; position:absolute; width:100%;}

– update default.js and change the if (SimpleModalLogin.isValid(form)) { ... } block of code to:

if (SimpleModalLogin.isValid(form)) {
	buttons.hide();
	loading.show();
	$.ajax({
		url: form[0].action,
		data: form.serialize(),
		type: 'POST',
		cache: false,
		success: function (resp) {
			var data = $('<div></div>').append(resp),
				error = $('#login_error', data[0]),
				loginform = $('#loginform', data[0]);

			if (error.length > 0) {
				loading.hide();
				buttons.show();
				$('p:first', form[0]).before(error);
			}
			else if (loginform.length > 0) {
				loading.hide();
				buttons.show();
				SimpleModalLogin.showError(form, 'empty_both');
			}
			else {
				var redirect = $('#redirect_to', form[0]).val(),
					href = location.href;

				if (redirect.length > 0) {
					if (SimpleModalLogin.url && SimpleModalLogin.url.indexOf("redirect_to") !== -1) {
						var p = SimpleModalLogin.url.split("=");
						href = unescape(p[1]);
					}
					else {
						href = redirect;
					}
				}
				window.location = href;
				dialog.close();
			}
		}
	});
}

That will hide the buttons and show the animated gif after the submit.

I had come across camilin119’s post the other day as I am currently implementing SimpleModal Login into the site I’m developing and couldn’t agree more with his suggestion/request for some “loading” visual cue. I’m happy to see that you agreed, Eric. I love the plugin and this was the only thing missing IMHO.

Anyway, I logged on to this forum this morning to bump that original post and was delightfully surprised to see your solution. Unfortunately, I don’t believe it’s quite there yet. I have implemented the changes you’ve suggested, Eric, but not only am I not seeing the spinner in action (original buttons stay there) but the login process is no longer working. No meltdown or anything, the modal window simply stays there (as-was) and does not log the user in. I’ve reverted for the time being, so no major emergency.

I’d love to help troubleshoot this Eric, is there anything else you suggest or is there any additional information I can provide to help iron this out?

Thanks for a great plugin and thanks for the support. Cheers.

UPDATE… in trying to make sense of your code (i’m a hack, not a dev guy) I am wondering if you need to define “buttons” and “loading” somewhere, before you can tell them to hide() and show()? Apologies if I’m way off, just wondering how your script would know what to hide/show if those aren’t defined anywhere.

I’m working on an update to release. It will also include the forgot password and register features.

You are correct, good catch. I apologize for missing some of the necessary code. I can’t update my original answer, so here’s what shuold get it working:

Before if (SimpleModalLogin.isValid(form)) {, add:

var buttons = $('.submit input:visible', form[0]),
	loading = $('.simplemodal-login-loading', form[0]);

Killer… worked like a charm. Thank you very much. I’ll look forward to updates, but it’s perfect for me now.

Cheers!

Thanks for the info emartin24, I have actually manually added the register and forgot links to my login and customized it to my site look. All I needed was that little fix.

Take a look and let me know what you think if you have time.
https://www.consolealliance.com

hey friends it’s takes too much time to load !

it’s not working in my site here

https://www.shreshthbharat.in

why is still loading ! often it’s taking a long time to process

@yashmistrey – have you tried this fix?

thanks Eric Martin worked well ,

??????? ! ??