JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
		<div class="library-layout">
	<img src="http://via.placeholder.com/350x350">
		</div>
    
	   <img src="http://via.placeholder.com/350x350" id="other-img"/>

     
    <button id="clickme">
  Fade out loading indicator
  </button>

CSS

img {
  opacity: 0.5;
}

.library-layout {
	float: left;
	height: 0;
  padding-bottom:40%;
	background-image: url('http://www.83photography.co.uk/ajax-loader.gif');
  background-repeat: no-repeat;
  background-position: center;
  transition: background 1s linear;
 }
 
#other-img {
  width: 200px;
  height: 200px;
  display: none;
 }

JavaScript

$( "#clickme" ).click(function() {


  $( ".library-layout" ).fadeOut( "slow", function() {
  
    //Fade out ready, time to fade in the other image
    $( "#other-img" ).toggle( "slow", function() {
    // Animation complete.
 		});
  });
});