jQuery Loading效果插件 - shCircleLoader

来源 : 作者 : admin时间 : 2015-12-06 21:30:33 人气指数 :

导语简介为了提高用户体验，给页面或应用加入 Loading 效果最基本最常见的方法。shCircleLoader 是一个基于 jQuery 的插件，它能够很方便快速的制作 Loading 效果。该 Loading 效果由多个 div 组成，没有

简介

为了提高用户体验，给页面或应用加入 Loading 效果最基本最常见的方法。shCircleLoader 是一个基于 jQuery 的插件，它能够很方便快速的制作 Loading 效果。该 Loading 效果由多个 div 组成，没有任何图片。shCircleLoader 还提供了众多属性，你可以根据这些属性自定义出各种各样的 Loading 效果。

兼容

jQuery 兼容

兼容 jQuery 1.4+。

浏览器兼容


IE10+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

shCircleLoader 使用了 CSS3 属性，所以不兼容低版本 IE 浏览器。

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.shCircleLoader.js"></script>

2、HTML

HTML 结构非常简单，只需一个空元素即可，不过您最好指定一个宽度和高度，要不然无法看到 Loading 效果。

<div class="loading"></div>

3、JavaScript

$('.loading').shCircleLoader({
    //options
});

配置

属性/方法	类型	默认值	说明
namespace	字符串	shcl	命名空间，添加一个 class 名称
radius	字符串	auto	Loading 的圆角弧度，默认值为 auto，将根据选择器的宽高自动计算
dotsRadius	字符串	auto	圆点圆角弧度
color	字符串	auto	圆点颜色，默认为 auto，将从选择器中获取
dots	整数	12	圆点的个数
duration	数值	1	每个圆点的动画时间，单位为秒
clockwise	布尔值	false	顺时针旋转
externalCss	布尔值	false	使用外部的 CSS，即不使用插件本身的 CSS
keyframes	字符串		自动 CSS3 动画效果，默认值为 0%{{prefix}transform:scale(1)}80%{{prefix}transform:scale(.3)}100%{{prefix}transform:scale(1)}
uaPrefixes	数组		前缀，用于兼容各种浏览器，默认值为 [‘o’, ‘ms’, ‘webkit’, ‘moz’, ”]