Edit in JSFiddle

sourceVector = new ol.source.Vector({
    loader: function (extent) {
        //place here any actions on start loading layer
        document.getElementById('laodingcont').innerHTML = "<font color='orange'>start loading.....</font>";
        $.ajax('https://demo.boundlessgeo.com/geoserver/wfs', {
            type: 'GET',
            data: {
                service: 'WFS',
                version: '1.1.0',
                request: 'GetFeature',
                typename: 'water_areas',
                srsname: 'EPSG:3857',
                bbox: extent.join(',') + ',EPSG:3857'
            }
        }).done(loadFeatures)
            .fail(function () {
            //place here any actions on fail loading layer
            document.getElementById('laodingcont').innerHTML = "<font color='red'>error loading vector layer.</font>";
        });
    },
    strategy: ol.loadingstrategy.bbox
});

function loadFeatures(response) {
    formatWFS = new ol.format.WFS(),
    sourceVector.addFeatures(formatWFS.readFeatures(response));
    document.getElementById('laodingcont').innerHTML = "<font color='green'>finish loading vector layer.</font>";
}

layerVector = new ol.layer.Vector({
    source: sourceVector,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
        })
    })
});

map = new ol.Map({
    layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    }), layerVector],
    target: document.getElementById('map'),
    view: new ol.View({
        center: [-8908887.277395891, 5381918.072437216],
        maxZoom: 19,
        zoom: 12
    })
});

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

html, body {
    height: 400px;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}
.map {
    height: 100%;
    width: 100%;
}