shCircleLoader – jQuery Loading效果插件
简介
为了提高用户体验,给页面或应用加入 Loading 效果最基本最常见的方法。shCircleLoader 是一个基于 jQuery 的插件,它能够很方便快速的制作 Loading 效果。该 Loading 效果由多个 div 组成,没有任何图片。shCircleLoader 还提供了众多属性,你可以根据这些属性自定义出各种各样的 Loading 效果。
兼容
jQuery 兼容
兼容 jQuery 1.4+。
浏览器兼容
IE10+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
shCircleLoader 使用了 CSS3 属性,所以不兼容低版本 IE 浏览器。
使用方法
1、引入文件
<script src="//www.dowebok.com/js/jquery.min.js"></script> <script src="//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’, ”] |