Loading dialog position

Loading dialog position

Hello all,

I am testing new mobile app project and fetching data from the server by getJSON(); and the list take some time to be loaded. what i want is loading dialog to appear in the center of the list container. I tried $.mobile.loading but it appears in the middle of the page not inside the list container !

here is my code
  2.  <body>
  3.             
  4.         <div id="home-page" data-role="page">
  5.             <div id="home-header" data-role="header">
  6.                 <h1><i class="icon-home"></i> Header</h1>
  7.             </div><!-- /#header -->
  8.             
  9.             <div id="home-content" data-role="content">
  10.             <ul id="category_list" data-filter="true" data-theme= "a" data-inset="true">   </ul>
  11.             </div>
  12.             
  13.             
  14.             <div id="footer" data-role="footer">
  15.                 <h1><i class="icon-coffee"></i> 2014 - Touch Marketing & Advertising</h1>
  16.             </div><!-- /#footer -->
  17.         </div>

  19.     </body>
      here is the script

  2. $.ajax({
  4. url: 'http://api.ihackernews.com/page?count=2&format=jsonp',
  5. crossDomain: true,
  6. dataType:'jsonp',
  7. type:'GET',
  8. cache: false,
  10. success: function(data){
  11. var loading = $.mobile.loading('show');
  12. $('#category_list').append(loading);
  15. $(data.items).each(function(index, val) {
  16.                     
  17. category = '<li><a href="posts.html" onclick="postList('+val.id+', '+val.post_count+')"> \
  18. '+val.title+' \
  19. </a></li>';
  21. $('#category_list').append(category);

  24.                 });
  26. }
  28. });