ol.control.ScaleLine

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.css">
<div id="map"></div>
<div id="scale-line" class="scale-line"></div>

CSS

#map {
    width: 512px;
    height: 256px;
}
.scale-line {
  position: absolute;
  top: 350px;
}
.ol-scale-line {
  position: relative;
  bottom: -50px;
  left: 0px;
}

JavaScript

var map = new ol.Map({
    target: 'map',
    layers: [
    new ol.layer.Tile({
        title: "Global Imagery",
        source: new ol.source.TileWMS({
            url: 'http://demo.boundlessgeo.com/geoserver/wms',
            params: {
                LAYERS: 'nasa:bluemarble'
            }
        })
    })],
    controls: ol.control.defaults().extend([
    new ol.control.ScaleLine({
        className: 'ol-scale-line',
        target: document.getElementById('scale-line')
    })]),
    view: new ol.View({
        projection: 'EPSG:4326',
        center: [0, 0],
        zoom: 1
    })
});