jquery实现加载进度条提示效果_jquery
程序员文章站
2022-03-20 16:49:02
...
本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:
";
angle -= 2 * Math.PI / total;
}
$("div.spinner").empty().html(html);
var lastLoaderdot = $("div.loaderdot").last();
timer = setInterval(function() {
$("div.loaderdot").each(function() {
var self = $(this);
var prev = self.prev().get(0) ? self.prev() : lastLoaderdot,
opas = prev.css("opacity");
self.animate({
opacity: opas
}, 50);
});
}, 60);
27}
运行效果截图如下:
具体代码如下:
进度条
css样式:
body,div { padding: 0; margin: 0; } div.spinner { position: absolute; width: 160px; height: 160px; margin-left: 240px; margin-top: 350px; } div.loaderdot { position: absolute; width: 20px; height: 20px; border-radius: 50%; background-color: rgb(29, 140, 248); } 1 window.onload = function() {
js代码:
var total = 16, angle = 3 * Math.PI, Radius = 80, html = ''; var spinnerL = parseInt($("div.spinner").css("margin-left")); var spinnerT = parseInt($("div.spinner").css("margin-top")); for (var i = 0; i