使用Loader.css和css-spinners来制作加载动画的方法

所属分类: 网页制作 / CSS 阅读数: 1240
收藏 0 赞 0 分享

Loader.css
当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loading动画,提示于用户页面在加载中,这些UX常识我想很多设计师都懂,但做一个GIF动画有点麻烦,为了方便,看看今天分享的Loader.css,仅用CSS样式就能实现一个loading动画效果。
201645113639873.gif (500×271)

当前有35个动画效果,所以选择还是挺多的。
201645113713408.gif (500×271)

201645113803473.gif (500×200)

使用方法

Step 1: 引入 loaders.min.css 和 loaders.css.js,这个JS仅是为了简化动画的DIV标签,如果不加这个JS,那么你的动画就必须加上对应数量DIV标签才能正常显示动画,所以建议加上,这样语义化好会好些。

JavaScript Code复制内容到剪贴板
  1. <link rel="stylesheet" type="text/css" href="loaders.min.css">   
  2. <script type="text/javascript" src="loaders.css.js"></script>  

Step 2: HTML代码,给loading元素加入动画class,如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="loader-inner ball-pulse"></div>  

改变加载动画颜色

此外你还要可以为loading动画加上颜色,代码如下:

CSS Code复制内容到剪贴板
  1. .ball-grid-pulse > div {   
  2.  background: orange;   
  3. }  

css-spinners
如果你从Loader.css上找不到喜欢的样式,那就看看今天小编分享的css-spinners,它自带的CSS加载样式很漂亮,图案色彩丰富,花样多多,就算不用它的CSS,也可以按它的动画来做成GIF图像。
201645113957068.png (500×351)

loading样式有花形、心形、指针、圆形旋转、进度条以及常见的菊花加载图案:
201645114016525.gif (500×369)

使用教程

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

STEP 1: 引入CSS文件

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

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

XML/HTML Code复制内容到剪贴板
  1. <head>  
  2.  ...   
  3.  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/heartbeat.css" type="text/css">  
  4. </head>  

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

XML/HTML Code复制内容到剪贴板
  1. <head>  
  2.  ...   
  3.  <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinners.css" type="text/css">  
  4. </head>  

STEP 2: HTML代码

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

XML/HTML Code复制内容到剪贴板
  1. <div class="heartbeat-loader">  
  2.  Loading…   
  3. </div>  

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

更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多