CSS图书馆 » HTML & CSS » 使用简单,好看的CSS加载动画源码

使用简单,好看的CSS加载动画源码

发表于: HTML & CSS. 评论 (1)
Sponsor

前期我们为大家介绍了一款 Loader.css ,如果你从Loader.css上找不到喜欢的样式,那就看看今天小编分享的css-spinners,它自带的CSS加载样式很漂亮,图案色彩丰富,花样多多,就算不用它的CSS,也可以按它的动画来做成GIF图像。

CSS加载动画

loading样式有花形、心形、指针、圆形旋转、进度条以及常见的菊花加载图案:

css-spinners-demo

使用教程

CSS Spinners除了轻量级外,使用也十分的简单,下面来看看教学:

STEP 1: 引入CSS文件

加载动画样式有单个以及全部,如果用户只需要一个加载动画,就选择对应的CSS文件。

单个动画引用,比如这里我们只需要心形图案的加载样式,对应样式文件是heartbeat.css

<head>
 ...
 <link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css">
</head>

全部加载样式引用,样式表文件是 spinners.css,但一般情况下我们只引用一个就够了。

<head>
 ...
 <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinners.css" type="text/css">
</head>

STEP 2: HTML代码

HTML部分要加入对应的loading样式class即可

<div class="heartbeat-loader">
 Loading…
</div>

好了,就是这么简单,喜欢的可以放到你的项目上哦!

样式名称:CSS SPINNERS
演示地址:http://www.css-spinners.com/
下载地址:https://github.com/jlong/css-spinners
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论One Response to “使用简单,好看的CSS加载动画源码”

  1. 按时发放 - 回复

    js咋写啊


{ 发表评论 }