轻松实现网站加载条

轻松实现网站加载条

		<script type='text/javascript'>
		 $({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>
		
		<style type="text/css">
			#progress {
			    top: 0;
				position:fixed;
				height: 2px;
				background:#1D1D1D;
				transition:opacity 500ms linear
			}
			#progress.done {
				opacity:0
			}
			#progress span {
				position:absolute;
				height:2px;
				-webkit-box-shadow:#b91f1f 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>
原文链接:https://harecms.com/?p=4013,转载请注明出处。
0
分享海报
文章评论下广告位招租
如有链接失效问题请提交工单
没有账号?注册  忘记密码?