css3 实现加载滚动条效果

最新推荐文章于 2024-05-16 23:39:45 发布

weixin_30338481

最新推荐文章于 2024-05-16 23:39:45 发布

阅读量247

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhujiasheng/p/6110266.html

版权


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<style>
   body{
       margin:0;
   }
   #progress {
       position:fixed;
       height: 2px;
       background:#2085c5;
       transition:opacity 500ms linear
   }
   #progress.done {
       opacity:0
   }
   #progress span {
       position:absolute;
       height:2px;
       -webkit-box-shadow:#2085c5 1px 0 6px 1px;
       -webkit-border-radius:100%;
       opacity:1;
       width:150px;
       right:-10px;
       -webkit-animation:pulse 2s ease-out 0s infinite;
   }

   @-webkit-keyframes pulse {
       30% {
           opacity:.6
       }
       60% {
           opacity:0;
       }
       100% {
           opacity:.6
       }
   }
</style>

<div id="progress">
            <span></span>
</div>

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script>
	$(function(){
		$({property: 0}).animate({property: 100}, {
		                duration: 3000,
		                step: function() {
		                    var percentage = Math.round(this.property);

		                    $('#progress').css('width',  percentage+"%");

		                     if(percentage == 100) {
		                            $("#progress").addClass("done");//完成，隐藏进度条
		                        }
		                }
		});
	})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/zhujiasheng/p/6110266.html

weixin_30338481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 实现加载滚动条效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style> body{ marg...
复制链接

扫一扫