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
说 明
下 载