javascript - Safari animation on form submit - Stack Overflow

admin管理员组

文章数量:1310193

I have page with form, that loads quite long after submit. That is why I decide to place spinner over button.

Instead if submit button I have div, that make:

$submit_btn.click(function(e){
    if ($submit_btn.attr("data-send") == "yes"){
        e.preventDefault();
    }
    else {
        $('#reg').html('<div id="spin_reg" class="spinner-icon"></div>');
        $new_try_now.submit();
    }
});

In div spinner I have CSS3 animation.

Problem is that animation works well in Chrome, but in Safari it doesn't start. I think the problem is that Safari kill all processes on page.

How I can avoid it without AJAX?

Edit:

Animation:

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner-icon {
    display: block;
    width: 16px;
    height: 16px;

    border: solid 2px transparent;
    border-top-color:  #158FD2;
    border-left-color: #158FD2;
    border-radius: 100%;

    -webkit-animation: nprogress-spinner 900ms linear infinite;
    -moz-animation:    nprogress-spinner 900ms linear infinite;
    -ms-animation:     nprogress-spinner 900ms linear infinite;
    -o-animation:      nprogress-spinner 900ms linear infinite;
    animation:         nprogress-spinner 900ms linear infinite;
}

I have page with form, that loads quite long after submit. That is why I decide to place spinner over button.

Instead if submit button I have div, that make:

$submit_btn.click(function(e){
    if ($submit_btn.attr("data-send") == "yes"){
        e.preventDefault();
    }
    else {
        $('#reg').html('<div id="spin_reg" class="spinner-icon"></div>');
        $new_try_now.submit();
    }
});

In div spinner I have CSS3 animation.

Problem is that animation works well in Chrome, but in Safari it doesn't start. I think the problem is that Safari kill all processes on page.

How I can avoid it without AJAX?

Edit:

Animation:

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
.spinner-icon {
    display: block;
    width: 16px;
    height: 16px;

    border: solid 2px transparent;
    border-top-color:  #158FD2;
    border-left-color: #158FD2;
    border-radius: 100%;

    -webkit-animation: nprogress-spinner 900ms linear infinite;
    -moz-animation:    nprogress-spinner 900ms linear infinite;
    -ms-animation:     nprogress-spinner 900ms linear infinite;
    -o-animation:      nprogress-spinner 900ms linear infinite;
    animation:         nprogress-spinner 900ms linear infinite;
}

• javascript
• jquery
• css
• safari
• css-animations

Share Improve this question Follow edited Sep 22, 2015 at 11:05 nik1004 asked Sep 22, 2015 at 9:55 nik1004nik1004 33733 silver badges1111 bronze badges 4

• you have show you css for animations so that we can tell you safari version of it.. :) – Guruprasad J Rao Commented Sep 22, 2015 at 9:59
• Very nice JavaScript, but don't you have troubles with animations? Please provide your css! – Mibit Commented Sep 22, 2015 at 10:02
• This may be caused by a JS error. Nothing in the console ? – Sebastien Commented Sep 22, 2015 at 11:47
• 1 Apple says: You must set the -webkit-animation-duration and -webkit-animation-name properties in order to see an animation. Try to use long declarations instead of only -webkit-animation for safari. – Mibit Commented Sep 22, 2015 at 12:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

A bit late to answer this, but may still help somebody. :)

Safari stops running scripts/gifs and etc. after submit. You need to submit the form after the spinner is shown already.

$('#spinner').show(function() {
     $('#form').submit();
});

In my case #spinner was already rendered with style='display:none'. If you don't want to render it before you need it, you can add display:none to your #spin_reg CSS, and then write JS like this:

$('#reg')
    .html('<div id="spin_reg" class="spinner-icon"></div>')
    .show(function() { $new_try_now.submit(); });

本文标签： javascriptSafari animation on form submitStack Overflow