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

本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

具体代码如下：

<！DOCTYPE html><html> <head><meta charset="utf-8"><title>进度条</title><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js"></script> </head> <body><div class="spinner"> </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 class="loaderdot" style="left:" + loaderL + "px;top:" + loaderT + "px; opacity:" + i / （total - 1） + ""></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}

希望本文所述对大家学习jquery程序设计有所帮助。