使用这个spin这个gem是为了在执行ajax操作的时候显示停顿标识符号

安装和依赖

#gemfile 
gem 'spinjs-rails'

#需要安装使用gem 'jquery-rails'
gem 'jquery-rails'

#application.js中使用下面的,其中jquery和jquery_ujs是必须是前后顺序,spin和jquery.spin是是spinjs-rails的js安装内容
//= require jquery
//= require jquery_ujs
//= require spin
//= require jquery.spin

具体js和前端使用

#application.js
$(document).ajaxStart(function () {
    $('#ajax-spin').spin({
          lines: 13 // The number of lines to draw
        , length: 28 // The length of each line
        , width: 14 // The line thickness
        , radius: 42 // The radius of the inner circle
        , scale: 1 // Scales overall size of the spinner
        , corners: 1 // Corner roundness (0..1)
        , color: '#000' // #rgb or #rrggbb or array of colors
        , opacity: 0.25 // Opacity of the lines
        , rotate: 0 // The rotation offset
        , direction: 1 // 1: clockwise, -1: counterclockwise
        , speed: 1 // Rounds per second
        , trail: 60 // Afterglow percentage
        , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
        , zIndex: 2e9 // The z-index (defaults to 2000000000)
        , className: 'spinner' // The CSS class to assign to the spinner
        , top: '50%' // Top position relative to parent
        , left: '50%' // Left position relative to parent
        , shadow: false // Whether to render a shadow
        , hwaccel: false // Whether to use hardware acceleration
        , position: 'absolute' // Element positioning
    });
});

$(document).ajaxStop(function () {
    $('#ajax-spin').spin(false);
});

#application.html.erb
<div id="ajax-spin"></div>

results matching ""

    No results matching ""