在线笔记 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);
}

2051

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

MDUI前端框架，表格头position: sticky无效的问题
MDUI前端框架不错，很漂亮、灵活，用起来能省不少时间。但是有些时候，它也会引入一些意想不到的问题：比如我想做一个统计表格，统计一大堆数据，然后希望页面滚动...
搭建家庭用服务器全套攻略，300元一台小主机全部搞定
有些人闲不住，喜欢折腾，业余时间想自己搭个网站，或者更简单点，想自己折腾个软路由、NAS什么的，那么，这篇文章可能对你有所帮助。一、硬件选型：一般而言，...
mysql8开启主从同步注意事项，否则会动不动就出错停止
默认情况下，mysql只允许本地登录，如果要开启主从同步，主机必须开启远程连接，则需要修改mysqld配置文件，以ubuntu 22.04+mysql8.0为例...
网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...
网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训
新版favinavi人性化网络收藏夹网站建设初期，还没有开始宣传，就发现访问量开始8小时内达到了大几千，有点喜出望外。可是再看看又发现不对，统计的关键页面的访问...
Apache2网站安装开通https协议SSL证书
比较简单实用的一种做法是使用certbot，签发证书、安装、配置web服务器（apache/nginx等）、自动更新一条龙。详细介绍请访问cerbot官网：ht...