在已有的Control.Loading控件基础上结合CSS3 animation属性实现
.nz-loading .nz-loader
{
display: block;
-webkit-animation: shift-rightwards 3s ease-in-out infinite;
-moz-animation: shift-rightwards 3s ease-in-out infinite;
-ms-animation: shift-rightwards 3s ease-in-out infinite;
-o-animation: shift-rightwards 3s ease-in-out infinite;
animation: shift-rightwards 3s ease-in-out infinite;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-o-animation-delay: .2s;
animation-delay: .2s;
}
.nz-loader
{
position: absolute;
display: none;
top:;
left:;
right:;
height: 2px;
z-index:;
background-color: #79C1C0 !important;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
L.Control.Loading.include({
onAdd: function (map) {
this._container = L.DomUtil.create('div', 'nz-loader', map._controlContainer);
map.on('baselayerchange', this._layerAdd, this);
this._addMapListeners(map);
this._map = map;
},
_showIndicator: function () {
L.DomUtil.addClass(this._map._container, 'nz-loading');
},
_hideIndicator: function () {
L.DomUtil.removeClass(this._map._container, 'nz-loading');
}
});