性能出色，纯CSS实现的loading动画——Loaders.css

yund56 2025-07-21 21:25 14 浏览

介绍

loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图，可供参考！

Github

就这样一个小小的库也收获了9.5k的stars，以下是其仓库源地址

https://github.com/ConnorAtherton/loaders.css

安装方式

自由选择安装方式进行安装使用

bower install loaders.css

npm i --save loaders.css

用法

1、标准用法

包括 loaders.min.css
创建一个元素并添加动画类（例如<div class="loader-inner ball-pulse"></div>）
将适当数量的<div>s插入该元素

jQuery（可选）

包括loaders.min.css，jQuery和loaders.css.js
创建一个元素并添加动画类（例如<div class="loader-inner ball-pulse"></div>）
loaders.js 是为每个动画注入正确数量的div元素的简单帮助库
要初始化页面加载后添加的加载器，请选择div并调用loaders它们（例如$('.loader-inner').loaders()）
enjoy it！

定制化

更改背景颜色

将样式添加到正确的子div元素

.ball-grid-pulse > div {
  background-color: orange;
}

更改尺寸大小

使用2D比例转换

.loader-small .loader-inner {
  transform: scale(0.5, 0.5);
}

浏览器兼容性

IE11
Chrome 41+
FireFox 36+
Safari 8+

衍生产物

Loaders.css衍生了很多适用于其它平台或框架的优秀库，这些都是受Loaders.css的启发而产生的

React

https://github.com/jonjaques/react-loaders

https://github.com/Hokid/vue-loaders

Angular

https://github.com/Masadow

ember

https://github.com/kaermorchen/ember-cli-loaders

https://github.com/gontovnik/DGActivityIndicatorView

Android

https://github.com/varunsridharan/Loaders.CSS-Android-App

总结

Loaders.css是一个非常出色的loading动画库，可以将它运用到你任何新的或者现有的项目中，性能出众，定制化，enjoy it！

js小学生动画

上一篇：从零开始:用Canvas绘制你的第一个动画小作品
下一篇：Three.js 实现虎年春节3D创意页面

性能出色，纯CSS实现的loading动画——Loaders.css

介绍

Github

安装方式

用法

定制化

浏览器兼容性

衍生产物

总结

相关推荐

django留言板_留言板html好看的模板

你还在手动筛选吗?filter函数才是多条件筛选的yyds!

一次分享给你29个PHP基础常用类助力你快速提升

一篇文章轻松掌握VLookup、XLookup与Filter函数

软件工程培训，选择线上还是线下呢?

连南举办2024年软件正版化工作联席会议暨正版软件培训班

初学ThinkPHP(一):用TP6+LayUI实现数据表格

新函数FILTER函数_filter函数的作用

营商在上海_营商上海数字科技有限公司

Excel筛选也智能?一个FILTER函数就搞定!