本文实例讲述了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 < total; i++) { //对每个元素的位置和透明度进行初始化设置 var loaderl = radius + radius * math.sin(angle) - 10; var loadert = radius + radius * math.cos(angle) - 10; html +=
; 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}
希望本文所述对大家学习jquery程序设计有所帮助。