如何使用rotar.js触发jquery加载程序

How to trigger a jquery loader using rotator.js

本文关键字：jquery 加载 程序 触发 js 何使用 rotar      更新时间：2023-09-26

我正在使用一个名为Simple jQuery Circular Loading Bar with Percentage-Rotator的插件http://www.jqueryscript.net/rotator/Simple-jQuery-Circular-Loading-Bar-with-Percentage-Rotator.html

这个插件使用canvas标记来绘制调用jquery函数时绘制的圆。如何在html页面上显示圆圈，并且只有在jquery中调用它时才触发百分比加载栏。

下面是一个jsFiddle示例-http://jsfiddle.net/fegvc5h8/

这是代码

<!--html-->
<div id="rotator" style="height:100px;width:100px"></div>
//jquery
$(window).load(function () {
$("#rotator").rotator({
starting: 0,
ending: 100,
percentage: true,
color: 'green',
lineWidth: 7,
timer: 10,
radius: 40,
fontStyle: 'Calibri',
fontSize: '20pt',
fontColor: 'darkblue',
backgroundColor: 'lightgray',
callback: function () {
}
});

})；

<div id="rotator" style="height:100px;width:100px"></div>
<input type="button" value="Fire" id="Fire">

$('#Fire').click(function () {
       Go();
});
function Go(){
 $("#rotator").rotator({
    starting: 0,
    ending: 100,
    percentage: true,
    color: 'green',
    lineWidth: 7,
    timer: 10,
    radius: 40,
    fontStyle: 'Calibri',
    fontSize: '20pt',
    fontColor: 'darkblue',
    backgroundColor: 'lightgray',
    callback: function () {
    }
    });
}

http://jsfiddle.net/fegvc5h8/5/

我想你想要这样的

Js Fiddle

$('#sub').on('click', function () {
    val = $('#value').val()
    $("#rotator").rotator({
        ending: val
    })
})
相关文章：