jquery - Dynamically and responsively centering loader image with table dimensions -

i'm using datatables building table. i'd use own loader image simple transparent background instead of datatable's processing indicator (default or customized one), since doesn't centered when there few records.

how can center loader (image+background) dynamically , responsively table dimensions?

here 2 examples centeralized loader:

current (wrong) fiddle

clarification (thanks @andrei gheorghiu comment):

i want loader centered rows area, i.e., table excluding headers, footers or other elements - shown in images above.

in fact, default spinner centered. looks off because columns unequal. can solve 2 ways:

• a) move spinner "look" centered (i wouldn't go route)
• b) make center column centered in table.

for b), considering have 3 columns, i'd use

#factorytable td:first-child,#factorytable td:last-child {   width: 30%; } 

i'm not sure how vertical centering done in plugin know question you'd custom spinner vertically aligned in content area of table, excluding both header , footer.

in general cases, way placing item centered inside container want center in, give container position:relative , child

{   position:absolute;   top:50%;   left:50%;   height: 100%;   width: 100%;   transform: translate(-50%,-50%); } 

but that's not possible tables, need different approach. have create centering container, position on top of table body , center image inside technique of choice. greatest advantage of technique disables user's ability interact table while table being loaded, might prevent various failures , errors in system, on both back-end , front-end.

here's updated fiddle mentioned far. key points are:

• centering image in #spinner using flexbox
• making first-child , last-child td's equal center 1 centered
• placing script positions , sizes #spinner on top of table inside function (resizespinner()) gets called on window resize , load events. note should trigger function after other javascript code can alter size of table.

---

looking closer @ resulting code, there 2 more things add:

• you can safely (and should) put datatable instance inside table var when initiate it. trying afterwards results re-initiating it, should not happen. you're doing init datatable, , throw away init again place inside table var.
• binding on either scroll or resize events (as did above) is, in principle, avoided.

in particular case, dom manipulation we're doing minor , it's hard believe device/browser combo ever encounter problems executing resizespinner() function on each browser resize, but, sake of principle , practice, should loading small library called jquery throttle/debounce enables throttle function (specify minimum interval between subsequent runs of function). don't particularly recommend above plugin but, since use jquery guess jquery equivalent should used. use lodash lot, library includes own versions of throttle , debounce, different syntax jquery plugin.
read more on specific differences between throttle , debounce, read this article.

so improved version of fiddle be:

var table = $('#factorytable').datatable({    "dom": "tipr",    "pagingtype": "simple",  });    table.row.add([1, 2, 3]).draw(false);  table.row.add([1, 2, 3]).draw(false);  table.row.add([1, 2, 3]).draw(false);  table.row.add([1, 2, 3]).draw(false);    var resizespinner = $.throttle(100, false, function() {    var fh = '#factorytable',        thh = $(fh + ' thead').height();    $('#spinner').css({      height: ($(fh).height() - thh) + 'px',      top: thh + 'px'    });  })  resizespinner();  $(window).on('load resize', resizespinner);

th,  td {    text-align: center;    vertical-align: middle;  }    .table-condensed>tbody>tr>td,  .table-condensed>tbody>tr>th,  .table-condensed>tfoot>tr>td,  .table-condensed>tfoot>tr>th,  .table-condensed>thead>tr>td,  .table-condensed>thead>tr>th {    padding: 5px;  }    body {    margin: 0;  }    #spinner {    position: absolute;    top: 0;    width: 100%;    overflow: hidden;    display: flex;    align-items: center;    justify-content: center;  }      /* add make left , right columns equal,   * centering contents of center column in table    * keep in mind table more 3 columns 30%    * column width.   */    #factorytable td:first-child,  #factorytable td:last-child {    width: 30%;  }

<link href="https://cdn.datatables.net/1.10.15/css/jquery.datatables.min.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>    <div id="table">    <table class="table table-bordered table-condensed table-responsive cell-border" id="factorytable">      <thead>        <tr class="active">          <th>district</th>          <th>department</th>          <th>team</th>        </tr>      </thead>      <tbody>      </tbody>    </table>    <span id="spinner" class="myspinner"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>    <span id="transp"></span>  </div>

it cleaned more, don't know rest of project i'll leave is. don't forget prefix css.