jQuery Loading效果插件shCircleLoader演示


1、默认

$('.loading1').shCircleLoader();

2、逆时针

$('.loading2').shCircleLoader({
    clockwise: false
});

3、自定义颜色

$('.loading3').shCircleLoader({
    color: '#f00'
});

4、持续时间

$('.loading4').shCircleLoader({
    duration: 2
});

5、圆点个数及大小

$('.loading5').shCircleLoader({
    dots: 24,
    dotsRadius: 10
});

6、圆点动画

$('.loading6').shCircleLoader({
    keyframes:
       '0%   { background:black}\
        40%  { background:transparent}\
        60%  { background:transparent}\
        100% { background:black}'
});

7、命名空间

$('.loading7').shCircleLoader({
    namespace: 'myns',
    color: 'transparent',
    dotsRadius: 15
});
.myns > div {
    box-shadow: 0 0 6px black, inset 0 0 6px black;
}

8、火球效果

$('.loading8').shCircleLoader({
    color: 'red',
    dots: 24,
    dotsRadius: 13,
    keyframes:
       '0%   {background: red;    {prefix}transform: scale(1)}\
        20%  {background: orange; {prefix}transform: scale(.4)}\
        40%  {background: red;    {prefix}transform: scale(0)}\
        50%  {background: red;    {prefix}transform: scale(1)}\
        70%  {background: orange; {prefix}transform: scale(.4)}\
        90%  {background: red;    {prefix}transform: scale(0)}\
        100% {background: red;    {prefix}transform: scale(1)}'
});

9、进度状态

$('.loading9').shCircleLoader();
var i = 0;
setInterval(function() {
    $('.loading9').shCircleLoader('progress', i + '%');
    if (++i > 100) i = 0;
}, 100);

dowebok.com 说 明 下 载