Lazy load images and remove BS4 spinner dynamically

Lazy-Loading-Images-Spinner.html

<div class="lazy-load-ctn">
  <div class="spinner-grow loading-img" role="status">
    <span class="sr-only">Loading...</span>
  </div>
  <img data-src="img/yourimage.png" class="img-fluid lazy">
</div>

Lazy-Loading-Images-Spinner.js

var lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazy",
  threshold: 0,
  callback_loaded: function(el) { $(el).parent().find('.loading-img').remove(); }
});

Lazy-Loading-Images-Spinner.scss

.lazy-load-ctn {
  height: 0;
  position: relative;
  padding-bottom: 28.24%; // use your own percentage to prevent reflow (image width / image height * 100)
  overflow: hidden;

  img {
    position: absolute;
    width: 100%;
    height: auto;
  }

  .loading-img {
    position: absolute;
    margin: auto;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    //color: #448981;
  }
}