<script src="http://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="./canvasloading.js" type="text/javascript"></script>
<canvas id="Loading" height="80" width="80"></canvas>
$('#Loading').canvasloading();rotationCycle - 设置自转一周的时间, 单位为毫秒, 默认为1500毫秒。
rotationFrame - 设置自转帧数, 默认为80帧。
emputyAngle - 设置自转留空角度, 默认为45度。
revolutionCycle - 设置公转一周的时间, 单位为毫秒, 默认为3800毫秒。
revolutionFrame - 设置公转帧数, 默认为80帧。
accelera - 设置渐变加速的倍数, 范围0-1, 值越大动态越强, 默认为0.9。
centerPercent - 设置渐变加速的位置, 范围0-1, 默认为0.1。
lineWidth - 设置线条粗细, 默认为10。
lineColor - 设置线条颜色, 默认为#ccc。
start - 开始播放动画。
stop - 停止/暂停播放动画。
使用方式
$('#Loading').canvasloading('start');
$('#Loading').canvasloading('stop');Html
<canvas id="Loading" height="80" width="80"></canvas>
JavaScript
$('#Loading').canvasloading({
lineWidth: 8,
lineColor: '#16799c'
});
$('#Loading').canvasloading('start');