Loader ajax

by Ivan Ferrer

HTML

<h3>Conteúdo carregado via AJAX:</h3>
<div id="dados"></div>

<hr>
<h3>Conteudo Lido com LOAD:</h3>
    
<div id="content"></div>

CSS

h3 {
   color:red; 
}
#dados img,
#content img {
    position:relative;
    left:50%;
    margin-left:-145px;
    top:20px;
    padding:100px 140px;
}

JavaScript

$(function(){
    $('#dados, #content').html('<img src="http://preloaders.net/preloaders/282/Thin%20fading%20line.gif" border="0">');
 $.ajax({
          url:'http://jsonplaceholder.typicode.com/posts?id=1',
          method:'get',
          dataType:'json', 
          success: function(data) {
            var el = '<h1>'+data[0].title+'</h1>\
                      <p>'+data[0].body+'</p>';
                $('#dados').html(el);
          }
      });
    $('#content').load('https://baconipsum.com/api/?type=all-meat&paras=3&start-with-lorem=1&format=html');
});