HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 CSS3教程 查看内容

loaders.css-纯CSS3超酷Loading加载指示器特效

2016-3-22 11:27| 发布者: admin| 查看: 3091| 评论: 0|来自: jQuery之家

摘要: loaders.css是一款使用纯CSS3 Loading加载指示器特效。该loading指示器特效共有11种不同的效果,都是使用CSS3 animation动画来完成。

  简要教程

  loaders.css是一款使用纯CSS3 Loading加载指示器特效。该loading指示器特效共有11种不同的效果,都是使用CSS3animation动画来完成。

 

  使用方法

  使用该Loading加载指示器特效需要在页面中引入loaders.css或loaders.min.css文件。

<link rel="stylesheet" href="loaders.css">
<-- 或者 -->
<link rel="stylesheet" href="loaders.min.css">    


  HTML结构

  该Loading加载指示器的HTML结构非常简单,使用一个<div>元素作为容器,并为它添加data-loader属性。

<div data-loader="circle"></div>          


  可用的data-loader属性值有:

  •   circle
  •   circle-side
  •   arrow-circle
  •   ball-scale
  •   ball-circle
  •   rectangle
  •   heart
  •   ball-rotate
  •   ball-pulse
  •   jumping
  •   satellite

 

  下面是一个效果截图:

查看演示      下载插件

  该Loading加载指示器特效的github地址为:https://github.com/jovey-zheng/loader

 

  来源:jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-18 03:15

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部