default
menu home
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

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

style分类标签: 全部 CSS html javascript php/other IT
by: fanshome  2023-05-20 08:35(UTC)

演 示

Loading图标,又称“加载中”图标,以往是用gif格式动图来实现。但是gif有一个比较明显的问题,不易调整大小,然后图片一般比较粗糙,颗粒感严重。

现在流行纯css的loading效果,比如不断转圈式、不断跳动式,网上有很多。这里不多做介绍,搜索一下会有很多。

给大家介绍一款动态横条式彩虹loading效果,类似谷歌风格,又超越谷歌的单一颜色Loading Bar,既充分利用了容器顶部的“无用”空间,又不失醒目,用户体验比较好,干扰的感觉最小,同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。

css代码参考自:https://codepen.io/lister/pen/mdrrYJQ

这不是进度条,进度条一般是逐渐填满的形式,有另外的实现方式。

CSScontent_copy复制代码
@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;
}
htmlcontent_copy复制代码
<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>

以下js代码使用了MDUI JS框架

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

visibility 951


- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消