下载源码后,初始化发现组件不带遮罩的效果,只能这样:

找了半天它的参数,硬是没找到,亦或是哪里有“机关”没发现。没办法,博主只能自己加上遮罩的效果了。于是新建了一个css样式文件暂且命名为spin.css,里面只有一个样式:
然后将spin.js改写了两个地方,改写后的内容如下:
> 1) + 'px'
});
}
for (; i < o.lines; i++) {
seg = css(createEl(),top: 1 + ~(o.scale * o.width / 2) + 'px',transform: o.hwaccel ? 'translate3d(0,0)' : '',opacity: o.opacity,animation: useCssAnimations && addAnimation(o.opacity,o.trail,start + i * o.direction,o.lines) + ' ' + 1 / o.speed + 's linear infinite'
});
if (o.shadow) ins(seg,css(fill('#000','0 0 4px #000'),{top: '2px'}));
ins(el,ins(seg,fill(getColor(o.color,i),'0 0 1px rgba(0,.1)')));
}
return el;
},/**
* Internal method that adjusts the opacity of a single line.
* Will be overwritten in VML fallback mode below.
*/
opacity: function(el,val) {
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
}
});
function initVML() {
/* Utility function to create a VML tag */
function vml(tag,attr) {
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',attr);
}
// No CSS transforms but VML support,add a CSS rule for VML elements:
sheet.addRule('.spin-vml','behavior:url(#default#VML)');
Spinner.prototype.lines = function(el,o) {
var r = o.scale * (o.length + o.width);
var s = o.scale * 2 * r;
function grp() {
return css(
vml('group',{
coordsize: s + ' ' + s,coordorigin: -r + ' ' + -r
}),{ width: s,height: s }
);
}
var margin = -(o.width + o.length) * o.scale * 2 + 'px';
var g = css(grp(),{position: 'absolute',top: margin,left: margin});
var i;
function seg(i,dx,filter) {
ins(
g,ins(
css(grp(),{rotation: 360 / o.lines * i + 'deg',left: ~~dx}),ins(
css(
vml('roundrect',{arcsize: o.corners}),{
width: r,height: o.scale * o.width,left: o.scale * o.radius,top: -o.scale * o.width >> 1,filter: filter
}
),vml('fill',{color: getColor(o.color,opacity: o.opacity}),vml('stroke',{opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
)
)
);
}
if (o.shadow)
for (i = 1; i <= o.lines; i++) {
seg(i,-2,'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
}
for (i = 1; i <= o.lines; i++) seg(i);
return ins(el,g);
};
Spinner.prototype.opacity = function(el,val,o) {
var c = el.firstChild;
o = o.shadow && o.lines || 0;
if (c && i + o < c.childNodes.length) {
c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild;
if (c) c.opacity = val;
}
};
}
if (typeof document !== 'undefined') {
sheet = (function() {
var el = createEl('style',{type : 'text/css'});
ins(document.getElementsByTagName('head')[0],el);
return el.sheet || el.styleSheet;
}());
var probe = css(createEl('group'),{behavior: 'url(#default#VML)'});
if (!vendor(probe,'transform') && probe.adj) initVML();
else useCssAnimations = vendor(probe,'animation');
}
return Spinner;
}));
spin.js
(1)初始化的时候,如果是显示,则给对应的标签加上fade样式

(2)、每次都将fade样式删除掉。

改好之后,就是测试界面了。