jquery实现加载进度条提示效果

jquery实现加载进度条提示效果

具体代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条</title> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js"></script> </head> <body> <div> </div> </body> </html>

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 < total; i++) { //对每个元素的位置和透明度进行初始化设置 var loaderL = Radius + Radius * Math.sin(angle) - 10; var loaderT = Radius + Radius * Math.cos(angle) - 10; html += "<div></div>"; 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}

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzdpg.html