[CSS/JS]INS页面加载顶部流动渐变进度条CSS代码-第1张

INS页面的加载顶部会出现一条渐变流动进度条,特效代码如下。(JS代码自行适配)

<div class="BHkOG PID-B"></div>

CSS:

@-webkit-keyframes LoadingBarProgress{0%{background-position:0% 0}
to{background-position:125% 0}
}
@keyframes LoadingBarProgress{0%{background-position:0% 0}
to{background-position:125% 0}
}
@-webkit-keyframes LoadingBarEnter{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes LoadingBarEnter{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}
to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
#BHkOG {
	height:3px;
	background:#27c4f5 -webkit-gradient(linear,left top,right top,from(#27c4f5),color-stop(#a307ba),color-stop(#fd8d32),color-stop(#58c322),to(#27c4f5));
	background:#27c4f5 -webkit-linear-gradient(left,#27c4f5,#a307ba,#fd8d32,#58c322,#27c4f5);
	background:#27c4f5 linear-gradient(to right,#27c4f5,#a307ba,#fd8d32,#58c322,#27c4f5);
	background-size:500%;
	-webkit-animation:2s linear infinite LoadingBarProgress,.5s ease-out LoadingBarEnter;
	animation:2s linear infinite LoadingBarProgress,.5s ease-out LoadingBarEnter;
	-webkit-transform-origin:left;
	transform-origin:left;
	width:100%
}
#PID-B {
	left:0;
	position:fixed;
	right:0;
	top:0;
	z-index:12
}

 

声明:本站文章原创有部分资源来源于网络,如无特殊说明或标注。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系 admin@liitk.com 进行删除处理!。