spinner on form submit

Question

Я ищу, чтобы создать скрипт, который открывает прядильщик на форме submit или select change.

Я хотел бы использовать spin.js, (это рабочий пример от разработчика):

var opts = { 
    lines: 11, // The number of lines to draw 
    length: 15, // The length of each line 
    width: 10, // The line thickness 
    radius: 30, // The radius of the inner circle 
    corners: 1, // Corner roundness (0..1) 
    rotate: 0, // The rotation offset 
    direction: 1, // 1: clockwise, -1: counterclockwise 
    color: '#000', // #rgb or #rrggbb 
    speed: 0.6, // Rounds per second 
    trail: 60, // Afterglow percentage 
    shadow: false, // Whether to render a shadow 
    hwaccel: false, // Whether to use hardware acceleration 
    className: 'spinner', // The CSS class to assign to the spinner 
    zIndex: 2e9, // The z-index (defaults to 2000000000) 
    top: 'auto', // Top position relative to parent in px 
    left: 'auto' // Left position relative to parent in px 
}; 

var spinner = null; 
var spinner_div = 0; 

$(document).ready(function() { 

    spinner_div = $('#spinner').get(0); 

    $("#btn-spin").click(function(e) { 
    e.preventDefault(); 
    if(spinner == null) { 
     spinner = new Spinner(opts).spin(spinner_div); 
    } else { 
     spinner.spin(spinner_div); 
    } 
    }); 

}); 

так .. когда я нажмите на кнопку отправки

<input id="btn-spin" type="submit" name="next" value="Continua" class="button-big"/> 

или когда я изменить значение на мой выбор

   <select name="billing_country" onChange="this.form.submit();"> 
        {billing_country_options} 
       </select> 

Я хотел бы:

1. добавить «лайтбокс-это открытое» и «Lightbox-это-фиксированный» классы HTML
2. удалить «скрытый» класс от моего glasspane DIV
3. старт (или показать) вертушка
4. ждать 500мс
5. отправьте кнопку или выберите (а затем другую страницу будет загружена)

Кто-то может мне помочь? это слишком трудно, очень трудно головоломка для меня, (я звукорежиссер, а не веб-разработчик)

спасибо так много

Answer 1

Предполагая, что вы настроите свой счетчик правильно, мы можем слушать либо форму отправить или выбрать события изменения с помощью jQuery и избежать использования встроенного JS. Для вашего <select> просто удалите встроенный JS.

$(function() { 
    // Remember to use 'var' 
    var spinner_div = $('#spinner').get(0), 
     spinner, 
     opts = { 
      // Opts go here 
     }, 
     showSpinner = function() { 
      // Add 'lightbox-is-open' and 'lightbox-is-fixed' classes to HTML 
      $('html').addClass('lightbox-is-open lightbox-is-fixed'); 

      // Remove 'hidden' class from '.glasspane' 
      $('.glasspane').removeClass('hidden'); 

      // Show spinner 
      if(spinner == null) { 
       spinner = new Spinner(opts).spin(spinner_div); 
      } else { 
       spinner.spin(spinner_div); 
      } 

      // Submit form after 500ms 
      var timer = window.setTimeout(function() { 
       $('form').submit(); 
      }, 500); 
     }; 

    // Bind events 
    $('form').on('submit', function(e) { 
     e.preventDefault(); 
     showSpinner(); 
    }); 
    $('#btn-spin').on('click', function(e) { 
     e.preventDefault(); 
     showSpinner(); 
    }); 
    $('select').on('change', showSpinner); 
});