Online notes favinavi - online bookmark

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

by: fanshome 2023-05-20 08:35(UTC)

Demo

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

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

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

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

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

CSSCopy codes

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

htmlCopy codes

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

javascriptCopy codes

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

2064

favinavi - for heavy web user Online notes

无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS?
累计布局偏移: Cumulative Layout Shift, 简称CLS，是一项web性能的重要指标，旨在避免页面渲染时，某些元素（比如图片、字体等）加载前...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
javascript捕获缺省的组合快捷键，比如CTRL+F
有时候我们需要在网页上捕获用户的按键动作，然后避免执行缺省动作，替换成我们想要执行的程序。下面我们以拦截并接管“ctrl+f”组合键为例，代码如下：
Applebot是什么？
Applebot是由苹果公司开发的网络爬虫（Web Crawler），用于收集和索引互联网上的网页内容。它是苹果公司搜索引擎Apple Search的一部分，...
How long a new website can occupy the first position of search engine
Whether a new website can rank first on the main keywords depends on many factor...
Ubuntu 22.04 live server更换亚马逊AWS的更新源
amzon亚马逊云AWS的更新源，即使在国内速度也基本可接受，其最大特点是软件丰富，常用软件包几乎没有找不到的。具体步骤如下：