加载

加载分成两种，一种是按钮状态，一种是遮罩层方式

按钮模式

使用data-toggle="spin" data-btn="true"绑定

实例


var spinBtn = $('button[data-toggle="spin"]')
spinBtn.on('spinning.bp', function() {
  // 3s 后加载完成
  setTimeout(function() {
    spinBtn.spin('end')
  }, 3000)
})

遮罩模式

使用$(selector).spin('spinnig')显示

实例


// demo2
var spin = new $.Spin
$('#j-btn-demo2').on('click', function() {
  spin.spinning()
})

spin.el.on('spinning.bp', function() {
  // 3s 后加载完成
  setTimeout(function() {
    console.log('end')
    spin.end()
  }, 3000)
})

区域模式

使用$(selector).spin('spinnig')显示

实例


// demo2
var spin = new $.Spin
$('#j-btn-demo2').on('click', function() {
  spin.spinning()
})

spin.el.on('spinning.bp', function() {
  // 3s 后加载完成
  setTimeout(function() {
    console.log('end')
    spin.end()
  }, 3000)
})