欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-20 16:49:02
...
本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

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

具体代码如下:




 进度条 
 



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 
"; 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}