vadimsva/waitme

jquery plugin for easy creating loading css3/images animations

waitMe

jquery plugin for easy creating loading css3 animations
Simple to use. Contains 14 animation effects and can use images.

For work required only jQuery, other libraries are not required. Plugin works on all browsers and IE10+ (for css3 animation effects).

Documentation

DOCUMENTATION & EXAMPLES

License

The MIT License (MIT)

waitme's Issues

能否使用bower的安装？

Wait me not working

Hello, When using the normal file not thes .min I get this error

setElTop is not defined : setElTop(getTop); line 179: col 7

if (getTop - elH >= 0 && getTop + elH <= cH) {
setElTop(getTop); // at This line

Also why WaitMe doesn't allow javascript to be execute before closing it ? example :

submitHandler: function(form) {
                run_waitMe();
                //th **('.form-horizontal').submit(function(e)** after run-waitMe() is not executed
                //If I add  $('.wrapper').waitMe('hide'); the code will be excuted. 


                $('.form-horizontal').submit(function(e){
                    console.log("insideTheForm");
                    var $form = $(this);
                    e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                    var url = $form.attr('action');
                    var formData = {};
                    //submit a POST request with the form data
                    $form.find(':input').each(function()
                    {
                        formData[ $(this).attr('name') ] = $(this).val();
                    });
                    //submits an array of key-value pairs to the form's action URL
                    $.post(url, formData, function(response) {
                        //handle successful validation
                        console.log("closeWaitME");
                        $('.wrapper').waitMe('hide');
                       ...
                    }).fail(function(response) {
                        //handle failed validation
                        $('.wrapper').waitMe('hide');
                        console.log("Failed");
                    });
                });
            }

Does not work in Internet Explorer - 8

Steps to reproduce problem

1. Launch IE 8
2. Go to Demo Page at URL -> http://vadimsva.github.io/waitMe/
3. Click Submit

Expected Result:
loading animation should work normally
Actual Result:
Following console error are encountered and loading animation does not get shows up.

• Object doesn't support this property or method jquery.min.js, line 2 character 29694
• 'jQuery' is undefined waitMe.js, line 6 character 1
• Object expected waitMe, line 116 character 1

Fade in, fade out, stack

I know that here's not the place to ask for features, but... I would like to have an option to enable fadeIn and fadeOut, and stack the requests, like if I call it two times, only hide after two hide() calls:

$('#container').waitMe();
...something...
$('#container').waitMe();
...something...
$('#container').waitMe('hide');
// do not hide yet, wait until I call it again
...something...
$('#container').waitMe('hide'); //now you can hide the loading animation

Add Icon Position option

I have several scenario need waitMe on a elment that within 30 px height, since the waitMe icon and text are two lines, the height is greater than my element, looks ugly.
So add this option would solve my problem, any plan?

publish via npm

Would make things easier :)

integration in webpack / Angular2 setup

I'm trying to integrate waitme into a webpack / angular 2 project based on:
https://github.com/AngularClass/angular2-webpack-starter.

I've added jQuery through npm as explained in:
https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-jQuery

Ive included waitMe.js in the index.html:

<script src="assets/waitme/waitMe.js"></script>

However, I'm getting:
VM461 waitMe.js:284 Uncaught ReferenceError: jQuery is not defined
Which seems to refer to the last line of waitMe.js:
})(jQuery);

I've tried:
http://stackoverflow.com/questions/26749045/webpack-expressing-module-dependency

but to no avail.

Any ideas?

Kind regards.

iOS Chrome(ver47.0.2526.107) not working

eg:roundBounce

black circle not animating...
I hope can fix it.

waitMe.css
add "-webkit-" to animation,keyframes can fix this problem

eg:
-webkit-animation:roundBounce 1.2s xxxxxxx
-webkit-animation-delay:-1.1s
@-webkit-keyframes roundBounce {
xxxxxx
xxxxxx
}

Disable scrolling out of waitMe background.

If content height is larger than waitMe container height, one can scroll down and some of the content appears not overlayed by waitMe.

Maybe disable container content scrolling or something else while waitMe is active?

waitMe is not working with my angular app

I'm using angular 1.x. And i added waitMe.css and also waitMe.js.
And this is my javascript controller file.

 $scope.makeNewLogin = function () {

            $('#login-box-body').waitMe({
                effect: 'bounce',
                text: '',
                bg: 'rgba(255,255,255,0.7)',
                color: '#000',
                maxSize: '',
                waitTime: -1,
                source: 'img.svg',
                textPos: 'vertical',
                fontSize: '',
                onClose: function (el) {
                }
            });

And also this is the corresponding HTML div.

<div class="login-box-body">
        <div class="wrapper">
            <form class="form-signin">
                <h2 class="form-signin-heading">Sign In</h2>
                <div style="text-align: center">

But there nothing. No error message or loading.
What's the issue for this ? This should appear when i press makeNewLogin function.

How to make it appear in the center

I am using 1.19 and I found that the animation appears on the left of my div instead of the center. How can I make it appear in the center?

add wait cursor poninter

on .waitMe class addcursor: wait;

Demo is not working on click of Submit

Environment
Chrome 40 Firefox 36 or IE 11 on Windows 7 Enterprise SP1

Steps to Reproduce

1. Go to URL http://vadimsva.github.io/waitMe/
2. Fill in values at Name, Email & Phone field (or keep it empty)
3. Click on Submit.
4. Choose Any effect (say bounce)

Expected Result
Loading animation should be displayed.
Actual Result
Loading animation is NOT displayed for all Effects. Clicking Submit & Stop or Refreshing the page also do NOT start the animation.

Overlay height issue

Hi,

The overlay is not covering all my webpage.
If I scroll down the overlay stays fixed at the top.
I'm using $('body').waitMe();

Can you help me ?

Thanks

Page scrolls in WaitMe

Thanks for a great tool.
I have notice a problem - when the WaitMe mask appears my page scrolls to the top. Any way to prevent this?

The scroll appears to occur with this line:
elem.addClass(elemClass + '_container').append(waitMeObj);

Thanks in advance,
Rich

Microsoft Nuget

It will be nice if also this plugin exists in nuget.org repository.

bower

Make it as bower package please!

Remove jquery dependency

When I used waitMe hide before alert(),But it worked after click alert() confirm?

it's my code in typescript:
$('body').waitMe("hide"); var ajax = JSON.parse(result); if (ajax.Status == 0) { alert("some message"); }

Add an global option which is a callback to be called when waitMe element is removed

In scenario like knockoutjs, if we call waitMe first, and ko.applyBindings, we just can not remove waitMe later directly, we need use ko.cleanNode first to clear knockout specific data, or memory leaks.

Problem with maxSize and rotation effect.

Hi, When using the rotation effect, if you set the maxSize it gets shifted to the left.

see screenshot.

White screen appears during hide

After the hide function is called in samsung galaxy tab 3

A grey screen exact to say the overlay screen stays without the loading image or the loading text.

It vanishes once the orientation of the device is changed.