JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
Leaflet get Data from JSONP / Geoserver

<div id="map"></div>

<div class="load-more">
    <span class="text">Ready / Centering ...</span>
    <div class="loading-indicator">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

CSS

html,body{
height:100%;
    width:100%;
}
#map{
height:95%;
    width:100%;
}


/* only neccessary for loading-info inspired by http://jsfiddle.net/gryzzly/6bdmz/ */


.load-more {
    background:#def4fb;
    display:inline-block;
    border:1px solid #b2c2ca;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    text-decoration:none;
    color:#478fb3;
    padding:.8em 1em;
    position:absolute;
    top:calc(50% - 23px);
    left:calc(50% - 52px);
    cursor:pointer;
}
.load-more.disabled {
    background:#effafe;
}
    .load-more .loading-indicator {
        display:none;
        position:absolute;
        width:26px;
        height:10px;
        left:50%;
        margin-left:-13px;
        top:50%;
        margin-top:-5px;
    }
        .load-more .loading-indicator span {
            float:left;
            width:6px;
            height:10px;
            margin-left:4px;
            background:#4790b3;
            -webkit-animation: fade 1s linear infinite;
        }
        .load-more .loading-indicator span:first-child {
            margin:0;
             -webkit-animation-delay: .333s;
        }
        .load-more .loading-indicator span:nth-child(2) {
            -webkit-animation-delay: .666s;
        }
        .load-more .loading-indicator span:nth-child(3) {
            -webkit-animation-delay: .999s;
        }
@-webkit-keyframes fade {
  0% { opacity: 1; -webkit-transform:scaleY(1.5); }
  60% { opacity: .25; -webkit-transform:scaleY(1); }
  100% { opacity: 0; -webkit-transform:scaleY(1); }
}

JavaScript

// for loading indicator
var loadMore = $('.load-more');

 var currentControl = loadMore,
            text = $('.text'),
            indicator = $('.loading-indicator');
console.log(text);
currentControl.addClass('disabled');
        text.css('visibility', 'hidden');
        indicator.css('display', 'block');



var center = new L.LatLng(39.00211, -76.20117);
var map = new L.Map('map', { center: center, zoom: 7});    


var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
	var osm = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 19, attribution: osmAttrib});		
	
	map.addLayer(osm);


var owsrootUrl = 'http://demo.opengeo.org/geoserver/usgs/ows';

var defaultParameters = {
    service : 'WFS',
    version : '2.0.0',
    request : 'GetFeature',
    typeName : 'usgs:tracts',
    outputFormat: 'text/javascript',
		srsName:"EPSG:4326"
};

var parameters = L.Util.extend(defaultParameters);

var URL = owsrootUrl + L.Util.getParamString(parameters);

var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'parseResponse',
    success : WFSLayer
}); 

function WFSLayer(data) {

var fuffi= L.geoJson(data, {
style: function (feature) {
    return {color: 'black',
        fillColor: '#ff0000',
        fillOpacity: 0.10};
    }
}).addTo(map);

 // loading indicator end
 currentControl.removeClass('disabled');
                text.css('visibility', 'visible');
                indicator.css('display', 'none');
    loadMore.fadeOut(2500);
// loading indicator end
map.fitBounds(fuffi.getBounds());
}