【Leafletjs】6.Control.Loading推展－在地圖上邊框添加加載動態條

在已有的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');
        }

    });