var map = new L.Map("map",{preferCanvas:true}).setView([48.86,2.35],12),tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map),markerClusterLayer = L.markerClusterGroup({
    disableClusteringAtZoom: 13,animate:false
  }).addTo(map);

// Add vectors of the new type directly to MCG.
for (var i = 0; i < 30; i += 1) {
  new L.marker(randomCoords()).addTo(markerClusterLayer);
}

function randomCoords() {
  return [
    48.86 + 0.1 * Math.random() - 0.05,2.35 + 0.16 * Math.random() - 0.08
  ];
}

#map {
	width: 800px; 
	height: 600px; 
	border: 1px solid #ccc;
}

#progress {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 400px;
    top: 300px;
    width: 200px;
    height: 20px;
    margin-top: -20px;
    margin-left: -100px;
    background-color: #fff;
    background-color: rgba(255,255,0.7);
    border-radius: 4px;
    padding: 2px;
}

#progress-bar {
    width: 0;
    height: 100%;
    background-color: #76A6FC;
    border-radius: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/0.7.2/proj4leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/leaflet.markercluster-src.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.Default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.0/MarkerCluster.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.css" rel="stylesheet"/>
<div id="map"></div>
    <span>Mouse over a cluster to see the bounds of its children and click a cluster to zoom to those bounds</span>