您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > CSS > CSS3效果 > 正文

13种CSS3网页加载进度条效果

2015-09-30 08:09:25 作者:天外飞仙 人气:132 Views

13种CSS3网页加载进度条效果
20150830141509

<script> var loader = document.getElementById('la-anim-6-loader') , border = document.getElementById('la-anim-6-border') , α = 0 , π = Math.PI , t = 15 , tdraw; function PieDraw() { α++; α %= 360; var r = ( α * π / 180 ) , x = Math.sin( r ) * 250 , y = Math.cos( r ) * - 250 , mid = ( α > 180 ) ? 1 : 0 , anim = 'M 0 0 v -250 A 250 250 1 ' + mid + ' 1 ' + x + ' ' + y + ' z'; loader.setAttribute( 'd', anim ); border.setAttribute( 'd', anim ); if( α != 0 ) tdraw = setTimeout(PieDraw, t); // Redraw } function PieReset() { clearTimeout(tdraw); var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z'; loader.setAttribute( 'd', anim ); border.setAttribute( 'd', anim ); } var inProgress = false; Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) { var anim = el.getAttribute( 'data-anim' ), animEl = document.querySelector( '.' + anim ); el.addEventListener( 'click', function() { if( inProgress ) return false; inProgress = true; classie.add( animEl, 'la-animate' ); if( anim === 'la-anim-6' ) { PieDraw(); } setTimeout( function() { classie.remove( animEl, 'la-animate' ); if( anim === 'la-anim-6' ) { PieReset(); } inProgress = false; }, 6000 ); } ); } );</script>

下载地址
预览地址

链接:http://www.jqueryba.com/5661.html(转载时请注明本文出处及文章链接)
分类:CSS3效果

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!