在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 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

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

CSS复制代码

@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;
}

html复制代码

<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框架。

javascript复制代码

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

2059

favinavi - 重度网络用户必备在线笔记

对比一下几个中文网络收藏夹的实用性之手机适配篇
手机满天下的时代，一个网站还好不好用，能否在手机上得到良好浏览体验非常关键了。最近几天自己重点关注了一下自己的favinavi网站页面的屏幕自适应效果，优化...
favinavi人性化网络收藏夹与pinbox跨平台收藏工具的简单对比
简体中文世界里的网络收藏夹类网站，我个人观点：pinbox是做得非常用心的一个，看得出来背后有一个专业团队在开发和运营，人数多少不知道，但肯定是比favinav...
php/javascript的一些关于时间处理的函数
记录一些经常用到的时间处理函数以备用。
CSS学习笔记：flex布局做出元素两端对齐效果
很久以前，还没有flex布局方法的时候，想要在同一行内的两个元素分两端左右对齐，应该使用float方法，左边的元素使用float:left; 右边的元素使用fl...
最好用的网络收藏夹应该是什么样？
最好用的网络收藏夹应该是什么样？我们这里先明确一下讨论的前提，参考：什么是网络收藏夹/网络书签。这个问题恐怕每个人的答案都不尽相同。但是以favinavi的...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...