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

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

具体代码如下：

！DOCTYPE html html head meta charset=' utf-8 ' title进度条/title脚本类型=' text/JavaScript ' src=' http :http://lib。新浪app。com/js/jquery/1。4 .1/jquery。量滴js /脚本/头体div class=' spinner '/div/body/html CSS样式：

body，div { padd : 0；保证金： 0；} div。spinner {位置：绝对；宽度： 160像素；高度： 160像素；左边距左侧： 240像素边距-top : 350 px；} div。装载机点{位置：绝对；宽度： 20px高度： 20像素边界半径： 50%;背景-color: rgb(29，140，248)；} 1 window.onload=function() {js代码：

定义变量总计=16,角度=3 *数学. PI，Radius=80，html=var Spinner l=ParSeint($(' div。spinner ').css(“”左边距');var Spinner=ParSeint($(' div。spinner ').css(“”页边距-顶部');for(var I=0；我总计；i ) { //对每个元素的位置和透明度进行初始化设置var loaderL=半径半径*数学罪恶(角度)-10;var loaderT=半径半径*数学cos(角度)-10;html=' div class=' loaderdot ' style=' left : ' loaderL ' px；top : ' LoAdert ' pxopa city 3360 ' I/(total-1)' '/div '；角度-=2 *数学PI /合计；} $(“div . spinner”).空()。html(html)；var LastLoadErdot=$(' div。LoadErdot ').last()；timer=setInterval(function(){ $(' div。装载机点').每个(function(){ var self=$(this)；var prev=self.prev().获取(0)?self.prev() : lastLoaderdot，opas=prev.css('不透明度');自我。animate({ opa city 3360 opas }，50)；});}, 60);27}希望本文所述对大家学习jquery程序设计有所帮助。