性能出色，纯CSS实现的loading动画——Loaders.css
yund56 2025-07-21 21:25 4 浏览
介绍
loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。下面这张图是在demo页面截取的Gif效果图，可供参考！
Github
就这样一个小小的库也收获了9.5k的stars，以下是其仓库源地址
https://github.com/ConnorAtherton/loaders.css
安装方式
自由选择安装方式进行安装使用
bower install loaders.cssnpm 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
- Vue
https://github.com/Hokid/vue-loaders
- Angular
https://github.com/Masadow
- ember
https://github.com/kaermorchen/ember-cli-loaders
- iOS
https://github.com/gontovnik/DGActivityIndicatorView
- Android
https://github.com/varunsridharan/Loaders.CSS-Android-App
总结
Loaders.css是一个非常出色的loading动画库，可以将它运用到你任何新的或者现有的项目中，性能出众，定制化，enjoy it！
相关推荐
- [西门子PLC] S7-1200+触摸屏TP700动画:3种办法制作技巧与案例
-
有同学问：西门子博图精简触摸屏与2个S71200能同时通讯吗？我现在有两个西门子S-1200PLC，想和一个西门子7寸精简型触摸屏通讯。具体该怎么配置，请教一下各位师傅回答：S7-1200和TP700...
- HTML5画布类库EaselJS生成鼠标控制的游戏动画人物
-
第一节：EaselJS生成游戏动画人物效果本节中将使用SpriteSheet和Sprite生成HTML5游戏中的动画人物形象使用SpriteSheet定义动画帧相关的图片，并且使用Sprite定义动画...
- 一亿家长五星推荐!金牌动画《萌鸡小队》4K大电影来咯
-
一亿家长五星推荐200亿播放量的金牌动画IP首度亮相大银幕啦合家欢动画电影《萌鸡小队：萌闯新世界》江苏有线4K特别版块全网首播收获成长和友谊理解爱与勇气陪孩子一起快乐冒险吧~来源：江苏有线今日看点...
- JavaScript简介:从概念、特点、组成和用法全面带你快速了解JS
-
“这里是云端源想IT，帮你轻松学IT”嗨~今天的你过得还好吗？我们总是先扬起尘土然后抱怨自己看不见-2024.04.15-JavaScript，简称JS，是一种轻量级的解释型编程语言，它是网页开...
- 总结100+前端优质库，让你成为前端百事通
-
1年多时间,陆陆续续整理了一些常用且实用的开源项目,方便大家更高效地学习和工作.js相关库js常用工具类「lodash」一个一致性、模块化、高性能的JavaScript实用工具库。「xij...
- 实现一个九宫格跳动loading动画 #前端开发
-
今天来实现一个九宫格跳动loading动画。·九个小方格会不断地交错跳动。·准备一个方块容器，小方块通过js来生成。js动态生成9个小方格，每个方格的动画延迟错开0.1秒。·使用flex布局让整体居中...
- Dynamics.js – 创建逼真的物理动画的 JS 库
-
Dynamics.js是一个用于创建物理动画JavaScript库。你只需要把dynamics.js引入你的页面，然后就可以激活任何DOM元素的CSS属性动画，也可以结合SVG使...
- 《火影忍者 博人传》动画化决定!OVA将于JSAF2016先行上映!
-
JUMP人气漫画《火影忍者》虽然说已经完结很久了，但JUMP和岸本貌似没有停下来的节奏。各种原创动画、外传漫画、剧场版动画接二连三地推出，有些火迷们都感觉看腻了。然而这波节奏还没停！据悉，曾经推出过剧...
- 强大 WebView2 + 不用写 JavaScript 的 htmx.js 「小轻快」开发桌面程序
-
WebView2是越来越香了。WebView2不但是Win11自带的系统组件，Win10也已经自动推送安装。即使是少量没有安装WebView2的系统——使用aardio中的we...
- 小学数学老师用DeepSeek做动画课件，一个提示词轻松搞定。
-
前几天我分享了一篇关于小学数学老师想做动画课件，DeepSeek-V3让数学知识"动"起来！。这篇文章收到了很多老师的好评，他们直呼好用，并表示学到了很多实用技巧。但也有老师反馈了...
- 手把手教你H5实现工厂游戏的CSS动画效果「实践」
-
作者：吴冠禧WecTeam转发连接：https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g0契机与背景今年Q1（2020年第一季度）参与了京喜事业部「京...
- 10个帅酷的HTML5最新动画应用（html5简单的动画）
-
在上个月，我们收集了不少来自国内外的HTML5相关资源和jQuery插件，其中包括很多经典帅酷的HTML5动画应用，有些还利用了Canvas和SVG的相关特性，从而让HTML5动画更加具有强烈的视觉效...
- 你需要知道的 15 个很棒的 CSS 动画库
-
从一种CSS样式配置到另一种的过渡可以使用CSS动画进行动画处理。描述CSS动画的样式和指示动画样式的开始和结束状态的一组关键帧，以及可能的中间路点，构成了动画。与传统的脚本驱动动画技术相...
- Three.js 实现虎年春节3D创意页面
-
前言本文由dragonir授权发布，作者还有很多关于Three.js的作品，刚开始看到这个作品，觉得很有趣，虽然对Three.js完全不懂，哈哈，原文地址：https://segmentfault.c...
- 性能出色，纯CSS实现的loading动画——Loaders.css
-
介绍loaders.css是Github上一个使用纯粹的css实现的开源loading动画库，完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分，以避免复杂的绘画和布局计算。下面这张...
- 一周热门
- 最近发表
-
- [西门子PLC] S7-1200+触摸屏TP700动画:3种办法制作技巧与案例
- HTML5画布类库EaselJS生成鼠标控制的游戏动画人物
- 一亿家长五星推荐!金牌动画《萌鸡小队》4K大电影来咯
- JavaScript简介:从概念、特点、组成和用法全面带你快速了解JS
- 总结100+前端优质库，让你成为前端百事通
- 实现一个九宫格跳动loading动画 #前端开发
- Dynamics.js – 创建逼真的物理动画的 JS 库
- 《火影忍者 博人传》动画化决定!OVA将于JSAF2016先行上映!
- 强大 WebView2 + 不用写 JavaScript 的 htmx.js 「小轻快」开发桌面程序
- 小学数学老师用DeepSeek做动画课件，一个提示词轻松搞定。
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)
- 图片素材 (36)