css-loaders Chrome扩展：快速预览所有动画效果
【免费下载链接】css-loaders A collection of loading spinners animated with CSS 项目地址: https://gitcode.***/gh_mirrors/cs/css-loaders
你是否还在为选择合适的加载动画效果而烦恼？是否希望能在开发过程中快速预览各种CSS加载动画？本文将介绍如何利用css-loaders项目创建一个Chrome扩展，让你轻松预览所有动画效果，提升开发效率。读完本文，你将了解如何获取项目、构建扩展以及使用扩展预览动画。
项目介绍
css-loaders是一个基于CSS的加载动画集合，每个动画仅需一个div元素即可实现。项目的目标是创建一组视觉吸引力强且能传达预期含义的最小化加载动画。所有动画大小都使用em单位，通过调整font-size即可轻松改变动画尺寸。项目详细信息可查看README.md。
项目结构
项目包含多种格式的样式文件和构建配置，主要结构如下：
- CSS文件：css/目录下包含load1.css至load8.css共8种动画效果的CSS文件，以及fallback.css作为降级样式
- 预处理文件：less/和sass/目录分别包含对应的LESS和SASS源文件
- 构建配置：Gruntfile.js用于自动化构建，支持将LESS和SASS文件编译为CSS
创建Chrome扩展的步骤
1. 获取项目代码
首先需要获取css-loaders项目代码，可通过以下命令克隆仓库：
git clone https://gitcode.***/gh_mirrors/cs/css-loaders
2. 准备扩展文件
创建一个新的extensions目录，将以下文件复制到该目录：
- 所有CSS文件：css/load1.css至css/load8.css
- 项目截图：images/css-loaders-screenshot.jpg
3. 创建扩展配置文件
在extensions目录下创建manifest.json文件，内容如下：
{
"manifest_version": 3,
"name": "CSS Loaders Preview",
"version": "1.0",
"description": "Preview all CSS loading animations from css-loaders project",
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": ["activeTab"]
}
4. 创建预览页面
创建popup.html文件，用于在扩展弹窗中展示所有动画效果：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="load1.css">
<link rel="stylesheet" href="load2.css">
<link rel="stylesheet" href="load3.css">
<link rel="stylesheet" href="load4.css">
<link rel="stylesheet" href="load5.css">
<link rel="stylesheet" href="load6.css">
<link rel="stylesheet" href="load7.css">
<link rel="stylesheet" href="load8.css">
<style>
.loader-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 10px;
}
.loader-item {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader-item"><div class="load1 loader">Loading...</div><p>load1</p></div>
<div class="loader-item"><div class="load2 loader">Loading...</div><p>load2</p></div>
<div class="loader-item"><div class="load3 loader">Loading...</div><p>load3</p></div>
<div class="loader-item"><div class="load4 loader">Loading...</div><p>load4</p></div>
<div class="loader-item"><div class="load5 loader">Loading...</div><p>load5</p></div>
<div class="loader-item"><div class="load6 loader">Loading...</div><p>load6</p></div>
<div class="loader-item"><div class="load7 loader">Loading...</div><p>load7</p></div>
<div class="loader-item"><div class="load8 loader">Loading...</div><p>load8</p></div>
</div>
</body>
</html>
5. 加载扩展到Chrome
- 打开Chrome浏览器，访问chrome://extensions/
- 开启右上角"开发者模式"
- 点击"加载已解压的扩展程序"，选择创建的extensions目录
动画效果说明
css-loaders提供了8种不同的动画效果，每种效果都有其独特的视觉表现：
load1 - 垂直伸缩动画
load1.css实现了三个垂直条的伸缩动画，通过改变高度和阴影实现波浪效果。关键代码如下：
.load1 .loader,
.load1 .loader:before,
.load1 .loader:after {
background: #ffffff;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
load2 - 旋转半圆动画
load2.css使用两个半圆元素旋转实现加载效果，通过transform-origin设置不同的旋转中心：
.load2 .loader:before {
transform-origin: 5.1em 5.1em;
animation: load2 2s infinite ease 1.5s;
}
.load2 .loader:after {
transform-origin: 0.1em 5.1em;
animation: load2 2s infinite ease;
}
load8 - 经典旋转圆环
load8.css实现了经典的圆环旋转效果，通过border属性创建圆环，其中一边设置为实色：
.load8 .loader {
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
animation: load8 1.1s infinite linear;
}
自定义与扩展
修改动画大小
所有动画都使用em单位，只需修改.loader类的font-size即可改变动画大小：
.load1 .loader {
font-size: 16px; /* 增大动画尺寸 */
}
添加新的动画效果
可以通过修改less/或sass/目录下的源文件添加新的动画效果，然后使用Grunt构建工具编译为CSS：
grunt less # 编译LESS文件
grunt sass # 编译SASS文件
总结
通过本文介绍的方法，你可以将css-loaders项目转换为一个实用的Chrome扩展，方便在开发过程中快速预览和选择合适的加载动画效果。该扩展不仅能提高开发效率，还能帮助你更好地理解每种动画的实现原理。
项目提供的8种动画效果各有特点，从简单的旋转到复杂的多元素动画，满足不同场景的需求。所有动画都遵循单一元素原则，代码简洁高效，是学习CSS动画的良好资源。
建议收藏本项目，关注后续更新，获取更多精彩的CSS动画效果。如有任何问题或建议，欢迎在项目仓库中提出。
【免费下载链接】css-loaders A collection of loading spinners animated with CSS 项目地址: https://gitcode.***/gh_mirrors/cs/css-loaders
