[代码样式]shCircleLoader – jQuery Loading效果插件

脚本代码
20年10月30日
编辑

简介

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

兼容

jQuery 兼容

兼容 jQuery 1.4+。

浏览器兼容


IE10+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

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

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/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’, ”]