Question

我正在使用这个名为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 () {
}
});

}）;

Answer 1

<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/

Answer 2

我想你想要这样的东西

Js Fiddle

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

如何使用rotator.js触发jquery加载器

2 个答案: