在已有的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: 0;    left: 0;    right: 0;    height: 2px;    z-index: 10100;    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');        }    });