今天分享一个非常不错的CSS加载效果：css-spinners。官方给出了很多做好的效果，花形、心形、指针、圆形旋转、进度条以及常见的菊花等加载图案。
css-spinners 不仅是轻量级以外，其使用方法也是非常的简单，官方教程也还挺全面的。
使用方法
1、下载CSS及引入CSS文件
css-spinners 有很多效果，而官方也针对每个效果都做了独立的css文件（减少多余css提高速度）。
比如我们想使用心形的效果就可以直接加载下面的这个css，其它的效果点击首页的相关效果就可以到详细页面，右边就可以看到相对应的css地址
|
1 |
<link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css"> |
这个是给出的在线地址，可以下载到本地。
如果我们想引用全部的css也可以直接引用下面的这个css。
|
1 |
<link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinners.css" type="text/css"> |
一般建议加载单个就可以了，这样可以减少多余css从而提高速度
2、编写HTML代码
html也很简单，设置相对应的class样式就可以了。
|
1 2 3 |
<div class="heartbeat-loader"> Loading… </div> |
点击首页的效果就可以到详细页面，页面右边有class样式的名称和相对应的css地址
相关下载
官方演示地址：http://www.css-spinners.com/
下载地址：https://github.com/jlong/css-spinners
发布者：柚子，转转请注明出处：https://ityouzi.com/archives/css-spinners.html
微信扫一扫 
支付宝扫一扫 
