一个纯CSS的最小干扰的渐变色彩虹loading bar

@keyframes aniBar 
{
  from {left: -100%}
  to {left: 0}
}

.loadingBar
{
	position: relative;
	width: 100%;
	height: 5px;
	overflow: hidden;
}

.loadingBar::after
{
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 200%;
	height: 100%;
	background: linear-gradient(135deg, #fff,#ffea97,#ffc5da,#62d3ff, #fff);
	background-size: 50% 100%;
	display: block;
	animation: aniBar .75s linear infinite;
}

/*以下为辅助演示用css*/
.login
{
	width: 300px;
	height: 360px;
	margin: 40px auto;
	border: solid 2px #999;
	border-radius: 8px;
	text-align: center;
	overflow: hidden;
}
.blank{height: 5px;}
.ok{
	width:80px;height:30px;line-height:30px;
	background: #098;
	color: #fff;
	cursor: pointer;
	border: 0;
	font-size: 16px;
	font-weight: bold;
}

<div class='login'>
	<div class="blank"></div>
	<h3>假设这是一个谷歌登录框</h3>
	<br/><br/>
	<h3>点击开始假装确认登录</h3>
	<br/>
	<h3>看顶部3秒彩虹效果</h3>
	<br/>
	<button class='ok' onclick='login()'>开始</button>
</div>

$=mdui.$;
function login(){
	$('.blank').addClass('loadingBar');
	setTimeout(() => {
		$('.blank').removeClass('loadingBar');
	}, 3000);
}